如何使用JQuery用您自己的选项替换下拉菜单选项？

Question

I have a dropdown menu: Code. The options of "code" come from the database and the dropdown is populated. I have a textbox: Name. For certain values populated in Name (again from database), I want to replace the dropdown menu options with my own set of options, essentially overwriting the ones that are already there. Is there a way to do this?

My Code: HTML:

 <div>
    <table>
    <tbody><tr><td><label>Code</label></td><td>
    <select class="codeSelection"></select></td></tr>
    </tbody>
    </table>                            
</div>

<div>
 <table>
  <tbody><tr><td><label>Name</label></td>
    <td><input type="text" class="nameInput"></td></tr>
  </tbody>
 </table>                            
</div>

Code that I tried so far: (followed How do I add options to a DropDownList using jQuery? )

$('.nameInput').html("");
$('.nameInput').val(data[0].codeValue);
    if ($('.nameInput').val() =="Smith")
            {
                var myOptions = {
                    val1 : "Tom",
                    val2 : "John"
                            };
                    $.each(myOptions, function(val, text){
                    $('.codeSelection').append($('<option></option>').val(val).html(text));
                            });
            }

This still gives me the old dropdown and just displays the values "Tom" and "John" as text.

Answer 1

The below code will read your text box value and loop thru the options inside the dropdown and update as needed. Make changes as needed.

  var txtVal=$("#nameInput").val();

  $("#codeSelection option").each(function() {
    var _item=$(this);  
    console.log(_item.val());
    if(_item.val()===txtVal)
     {
         //_item is the one you want. Make the changes as needed.
         // Here i am updating the value and text.
         _item.val("newValue").text("NewName");
     }
   });

Working sample : http://jsbin.com/zexapizabe/2/

Answer 2

You just need to clear your options before appending:

$('.codeSelection option').remove();

There's a runnable snippet below if you want to see it in action. As soon as you click off the name, the dropdown options will change.

 $('.nameInput').on("blur", function() { if ($('.nameInput').val() =="Smith") { var myOptions = { val1 : "Tom", val2 : "John" }; $('.codeSelection option').remove(); $.each(myOptions, function(val, text){ $('.codeSelection').append($('<option></option>').val(val).html(text)); }); } }); $(function() { $(".nameInput").get(0).focus(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <table> <tbody><tr><td><label>Code</label></td><td> <select class="codeSelection"> <option>Name One</option> </select></td></tr> </tbody> </table> </div> <div> <table> <tbody><tr><td><label>Name</label></td> <td><input type="text" class="nameInput" value="Smith"></td></tr> </tbody> </table> </div>