duangu8264
2015-05-28 08:45
浏览 134

如何更改下拉值并在javascript中触发onchange函数

I was wondering if it is possible to change a value of a dropdown box dynamically and to trigger an ajax onchange function assigned to this dropdown at the same time.

so far I can only change the value of a dropdown box but the onchange function is not being called.

here is the dropdown:

<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
  <option value="">--Select Item--</option>
  <option value="one"> Option one</option>
  <option value="two"> Option Two</option>
  <option value="three"> Option Three</option>
</select>

when I do this operation:

document.getElementById("ProductSelector").value = "one";

the value of the dropdown is changing, but the getItems function is not being triggered.

What am I doing wrong or may be there is another way to change a value of the doropdown which will allow me to trigger my ajax function as well?

I don't want to use JQuery. I just wandering why the function is not working if I use dinamic change and on manual change it works fine?

图片转代码服务由CSDN问答提供 功能建议

我想知道是否可以动态更改下拉框的值并触发分配的ajax onchange函数 同时到这个下拉列表。

到目前为止我只能更改下拉框的值,但是没有调用onchange函数。

这里是下拉列表:

 &lt; select name =“ProductSelector”id =“ProductSelector”onchange =“getItems(this.value)”&gt; 
&lt; option  value =“”&gt;  - 选择项目 - &lt; / option&gt; 
&lt; option value =“one”&gt; 选项一&lt; / option&gt; 
&lt; option value =“two”&gt; 选项二&lt; / option&gt; 
&lt; option value =“three”&gt; 我执行此操作时,选项3&lt; / option&gt; 
&lt; / select&gt; 
   
 
 

  document  .getElementById(“ProductSelector”)。value =“one”; 
   
 
 

下拉列表的值正在变化,但 getItems 函数 没有被触发。

我做错了什么或者可能有另一种方法来改变doropdown的值,这也允许我触发我的ajax函数?

我不想使用JQuery。 我只是徘徊为什么功能不起作用,如果我使用dinamic更改和手动更改它工作正常?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • dongpobo6009 2015-05-28 09:12
    已采纳

    So, you are changing the value with JavaScript and the change event isn't triggering. So, lets trigger it then.

    Trigger the event change every time you change the value via JavaScript.

    No jQuery used.

    Try this:

    function changeVal() {
      var elem = document.getElementById("ProductSelector"),
        event = new Event('change');
    
      elem.value = "one";
      elem.dispatchEvent(event);
    }
    
    
    function getItems(val) {
      alert(val);
    }
    
    changeVal();
    <select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
      <option value="">--Select Item--</option>
      <option value="one">Option one</option>
      <option value="two">Option Two</option>
      <option value="three">Option Three</option>
    </select>

    </div>
    
    已采纳该答案
    打赏 评论
  • dongluanban3536 2015-05-28 08:51

    You can try removing the onchange="" attribute from the select input and just use the jQuery to check for changes:

    $('body').on('change', "#ProductSelector", function(){
      var id = $(this).val();
       //now do your ajax call with the value selected
    });
    
    打赏 评论
  • doutuo7126 2015-05-28 08:52

    "What am I doing wrong or may be there is another way to change a value of the doropdown which will allow me to trigger my ajax function as well?"

    Another way of adding the event listener is by doing it "unobtrusive style".

    document.getElementById('ProductSelector').addEventListener('change', function(event) {
      getItems(event.target.value);
    });
    
    function getItems(val) {
      // Todo: whatever needs to be done :-)
      alert(val);
    }
    <select name="ProductSelector" id="ProductSelector">
      <option value="">--Select Item--</option>
      <option value="one">Option one</option>
      <option value="two">Option Two</option>
      <option value="three">Option Three</option>
    </select>

    http://jsfiddle.net/dytd96cb/

    </div>
    
    打赏 评论
  • douye7033 2015-05-28 08:53

    I mostly do it this way:

    HTML:

    <select class="class-name">
    
        <option value="1">1</option>
        <option value="2">2</option>
    
    </select>
    

    jQuery:

    $(".class-name").on("change", function() {
    
        var value = $(this).val();
    
        $.ajax({
    
            type: "post",
            url: "your-php-script.php",
            data: { 'value' : value },
            success: function (data) {
    
                 alert('This has changed');
    
            }
    
        );    
    
    });
    
    打赏 评论
  • dpglo66848 2015-05-28 09:20

    Problem is changing the value with JS will not trigger the change event. Best solution would be to write a function which changes the value and triggers the change event manually.

    HTML

    <select name="ProductSelector" id="ProductSelector">
        <option value="">--Select Item--</option>
        <option value="one"> Option one</option>
        <option value="two"> Option Two</option>
        <option value="three"> Option Three</option>
    </select>
    

    JS (no jQuery)

    //define the element so we can access it more easily
    var element = document.getElementById('ProductSelector');
    //define the event we want to trigger manually later
    var event = new Event('change');
    
    //add eventlistener which is triggered by selecItem()
    element.addEventListener('change', function(event) {
        getItems(event.target.value);
    });
    
    function getItems(val) {
        alert(val);
    }
    
    //set the value and trigger the event manually
    function selectItem(value){
        //select the item without using the dropdown
        element.value = value;
        //trigger the event manually
        element.dispatchEvent(event);
    }
    
    //using a function with the option you want to choose
    selectItem("three");
    

    JSFiddle

    Use the working JSFiddle: Note that you have to uncomment the last line of code.

    打赏 评论
  • doubi7739 2015-05-28 10:36
    <html>
    
    <body>
    
    
    Select your favorite value:
    <select id="mySelect">
      <option value="value1">value1</option>
      <option value="value2">value2</option>
      <option value="value3">value3</option>
      <option value="value4">value4</option>
    </select>
    
    
    <script>
    
    $(document).ready(function() {
    
      $( "#mySelect" ).change(function() {
    
    
    
        var value = $(this).val();      
    
        $.ajax({
    
            type: "post",
            url: "request-url.php",
            data: { 'value' : value },
            success: function (data) {
    
                 alert('the ajax request has been send');
    
            }
    
        );    
    
    
    }); 
    
    
    });
    
    
    </script>
    
    
    </body>
    </html>
    
    打赏 评论

相关推荐 更多相似问题