blocks|key|1333903|text|我不太了解JQuery，但我听说它允许用这种语法触发本机事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333904|$(document).ready(function(){

++++$('#countrylist').change(function(e){
+++++++//+Your+event+handler
++++});

++++//+And+now+fire+change+event+when+the+DOM+is+ready
++++$('#countrylist').trigger('change');
});|code-block|syntax|javascript|1333905|您必须在调用trigger()或change()之前声明change事件处理程序，否则将不会触发它。感谢提到@LenielMacaferi。|1333906|更多信息here。|offset|length|1333907|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Events/trigger^0|0|0|0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I don't know that much JQuery but I've heard it allows to fire native events with this syntax.</p>

<pre><code>$(document).ready(function(){

    $('#countrylist').change(function(e){
       // Your event handler
    });

    // And now fire change event when the DOM is ready
    $('#countrylist').trigger('change');
});
</code></pre>

<p>You must declare the change event handler before calling trigger() or change() otherwise it won't be fired. Thanks for the mention @LenielMacaferi.</p>

<p>More information <a href="http://docs.jquery.com/Events/trigger" rel="noreferrer">here</a>.</p>


blocks|key|1333963|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333964|$(document).ready(function(event)+{
++++$('#countrylist').change(function(e){
+++++++++//+put+code+here
+++++}).change();
});|code-block|syntax|javascript|1333965|定义更改事件，并立即触发它。这可确保在调用事件处理程序之前已定义它。|1333966|回答最初的帖子可能会晚一些，但其他人可能会从速记符号中受益，这遵循jQuery的链接，等等|1333967|jquery+chaining|offset|length|1333968|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jquery/jquery_chaining.asp^0|0|0|0|0|0|F|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Try this:</p>

<pre><code>$(document).ready(function(event) {
    $('#countrylist').change(function(e){
         // put code here
     }).change();
});
</code></pre>

<p>Define the change event, and trigger it immediately. This ensures the event handler is defined before calling it.</p>

<p>Might be late to answer the original poster, but someone else might benefit from the shorthand notation, and this follows jQuery's chaining, etc</p>

<p><a href="http://www.w3schools.com/jquery/jquery_chaining.asp" rel="noreferrer">jquery chaining</a></p>


blocks|key|1549455|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549456|$('#id').change();|offset|length|style|CODE|1549457|这对我很有效。|1549458|在一行上设置了值：$('#id').val(16).change();|1549459|entityMap^0|0|0|I|0|0|9|Q|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

<p>Try this:</p>

<p><code>$('#id').change();</code> </p>

<p>Works for me.</p>

<p>On one line together with setting the value: 
 <code>$('#id').val(16).change();</code></p>


blocks|key|1549305|text|如果您正在尝试使用链接的下拉列表，最好的方法是使用一个脚本返回一个预先构建的选择框和一个请求它的AJAX调用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549306|Here+is+the+documentation+for+jQuery's+Ajax+method+if+you+need+it.|offset|length|1549307|$(document).ready(function(){

++++$('#countrylist').change(function(e){
++++++++$this+=+$(e.target);
++++++++$.ajax({
++++++++++++type:+"POST",
++++++++++++url:+"scriptname.asp",+//+Don't+know+asp/asp.net+at+all+so+you+will+have+to+do+this+bit
++++++++++++data:+{+country:+$this.val()+},
++++++++++++success:function(data){
++++++++++++++++$('#stateBoxHook').html(data);
++++++++++++}
++++++++});
++++});

});|code-block|syntax|javascript|1549308|然后在id为"stateBoxHook“的状态选择框周围设置一个跨度。|1549309|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Ajax/jQuery.ajax^0|0|0|1U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>If you are trying to have linked drop downs, the best way to do it is to have a script that returns the a prebuilt select box and an AJAX call that requests it.</p>

<p><a href="http://docs.jquery.com/Ajax/jQuery.ajax" rel="nofollow noreferrer">Here is the documentation for jQuery's Ajax method if you need it.</a></p>

<pre><code>$(document).ready(function(){

    $('#countrylist').change(function(e){
        $this = $(e.target);
        $.ajax({
            type: "POST",
            url: "scriptname.asp", // Don't know asp/asp.net at all so you will have to do this bit
            data: { country: $this.val() },
            success:function(data){
                $('#stateBoxHook').html(data);
            }
        });
    });

});
</code></pre>

<p>Then have a span around your state select box with the id of "stateBoxHook"</p>


blocks|key|1549569|text|或者，您可以将onchange属性放在dropdownlist本身上，该onchange将调用某些jquery函数，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549570|<input+type="dropdownlist"+onchange="jqueryFunc()">

<script+type="text/javascript">
$(function(){
++++jqueryFunc(){
++++++++//something+goes+here
++++}
});
</script>|code-block|syntax|javascript|1549571|希望这篇文章能对你有所帮助，并请注意，这段代码只是一个粗略的草稿，没有在任何ide上测试过。谢谢|1549572|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>alternatively you can put onchange attribute on the dropdownlist itself, that onchange will call certain jquery function like this.</p>

<pre><code>&lt;input type="dropdownlist" onchange="jqueryFunc()"&gt;

&lt;script type="text/javascript"&gt;
$(function(){
    jqueryFunc(){
        //something goes here
    }
});
&lt;/script&gt;
</code></pre>

<p>hope this one helps you, and please note that this code is just a rough draft, not tested on any ide. thanks</p>


blocks|key|1334208|text|由于某些原因，这里提供的其他jQuery解决方案在从控制台运行脚本时有效，但在从Chrome+Bookmarklets触发时不适用于我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1334209|幸运的是，this+Vanilla+JS+solution+(+triggerChangeEvent函数)确实起作用了：|1334210|​|1334211|/**
++*+Trigger+a+`change`+event+on+given+drop+down+option+element.
++*+WARNING:+only+works+if+not+already+selected.
++*+@see+https://stackoverflow.com/questions/902212/trigger-change-event-of-dropdown/58579258#58579258
++*/
function+triggerChangeEvent(option)+{
++//+set+selected+property
++option.selected+=+true;
++
++//+raise+event+on+parent+<select>+element
++if+("createEvent"+in+document)+{
++++var+evt+=+document.createEvent("HTMLEvents");
++++evt.initEvent("change",+false,+true);
++++option.parentNode.dispatchEvent(evt);
++}
++else+{
++++option.parentNode.fireEvent("onchange");
++}
}

//+################################################
//+Setup+our+test+case
//+################################################

(function+setup()+{
++const+sel+=+document.querySelector('#fruit');
++sel.onchange+=+()+=>+{
++++document.querySelector('#result').textContent+=+sel.value;
++};
})();

function+runTest()+{
++const+sel+=+document.querySelector('#selector').value;
++const+optionEl+=+document.querySelector(sel);
++triggerChangeEvent(optionEl);
}|code-block|syntax|javascript|1334212|<select+id="fruit">
++<option+value="">(select+a+fruit)</option>
++<option+value="apple">Apple</option>
++<option+value="banana">Banana</option>
++<option+value="pineapple">Pineapple</option>
</select>

<p>
++You+have+selected:+<b+id="result"></b>
</p>
<p>
++<input+id="selector"+placeholder="selector"+value="option[value='banana']">
++<button+onclick="runTest()">Trigger+select!</button>
</p>|1334213|1334214|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Bookmarklet|1|https://stackoverflow.com/a/2856602^0|E|6|1B|C|0|0|W|I|5|O|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

<p>For some reason, the other <code>jQuery</code> solutions provided here worked when running the script from console, however, it did not work for me when triggered from Chrome <a href="https://en.wikipedia.org/wiki/Bookmarklet" rel="nofollow noreferrer">Bookmarklets</a>.</p>

<p>Luckily, <a href="https://stackoverflow.com/a/2856602">this Vanilla JS solution</a> (the <code>triggerChangeEvent</code> function) did work:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
  * Trigger a `change` event on given drop down option element.
  * WARNING: only works if not already selected.
  * @see https://stackoverflow.com/questions/902212/trigger-change-event-of-dropdown/58579258#58579258
  */
function triggerChangeEvent(option) {
  // set selected property
  option.selected = true;
  
  // raise event on parent &lt;select&gt; element
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    option.parentNode.dispatchEvent(evt);
  }
  else {
    option.parentNode.fireEvent("onchange");
  }
}

// ################################################
// Setup our test case
// ################################################

(function setup() {
  const sel = document.querySelector('#fruit');
  sel.onchange = () =&gt; {
    document.querySelector('#result').textContent = sel.value;
  };
})();

function runTest() {
  const sel = document.querySelector('#selector').value;
  const optionEl = document.querySelector(sel);
  triggerChangeEvent(optionEl);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="fruit"&gt;
  &lt;option value=""&gt;(select a fruit)&lt;/option&gt;
  &lt;option value="apple"&gt;Apple&lt;/option&gt;
  &lt;option value="banana"&gt;Banana&lt;/option&gt;
  &lt;option value="pineapple"&gt;Pineapple&lt;/option&gt;
&lt;/select&gt;

&lt;p&gt;
  You have selected: &lt;b id="result"&gt;&lt;/b&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input id="selector" placeholder="selector" value="option[value='banana']"&gt;
  &lt;button onclick="runTest()"&gt;Trigger select!&lt;/button&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>I want to trigger the change event of dropdown in $(document).ready using jquery.</p>

<p>I have a cascading dropdown for country and state in user details page. how can i set the value (which is taken from DB based on the user id) for country and state in MVC with C#.</p>


Trigger change event of dropdown

我想使用jquery在$(document).ready中触发dropdown的更改事件。我在用户详细信息页面中有一个国家和州的级联下拉列表。如何使用C#在MVC中设置国家和州的值(根据用户id从数据库中获取)。

问dropdown触发器变更事件
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问dropdown触发器变更事件EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问dropdown触发器变更事件
EN