How to replace dropdown menu options with your own options using 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.

What is this: `new Option(text,val)`? That doesn't look like JavaScript to me--unless there's code you aren't showing. Follow the code example as shown in your linked question. — Dave, Apr 13 '15 at 20:57
@dave please see the updated code. followed the accepted answer in the linked question. — pal, Apr 13 '15 at 21:02
@dave: [`option()` constructor (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option), [`Option()` object (MSDN)](https://msdn.microsoft.com/en-us/library/ie/dd757810(v=vs.85).aspx). In short: it's perfectly valid JavaScript (though I don't know which version of ECMAScript or JavaScript first introduced it). — David Thomas, Apr 13 '15 at 21:23
@DavidThomas thanks, you learn something new every day. [It appears to have been created with HTML5](http://www.w3.org/html/wg/drafts/html/CR/forms.html#dom-option) — Dave, Apr 13 '15 at 21:36

score 0 · Answer 1 · answered Apr 13 '15 at 21:15

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/

Dave · Answer 2 · 2015-04-13T21:22:14.933

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>

`.remove()` is removing the options but I'm not able to append my options. I still have the option value appearing as a text on the form. — pal, Apr 13 '15 at 21:24
I'm confused. Is my snippet working as you would like it to? I may be misunderstanding your question. — Dave, Apr 13 '15 at 21:42
Yes the code snippet is running perfectly. But when I use it my code, it fails. The only difference seems to be that Im loading my dropdown menu from the database when the page is created. After I use `.remove()` the options are removed but the new options are not being added to the dropdown. I cant seem to get around this. — pal, Apr 13 '15 at 21:45

How to replace dropdown menu options with your own options using JQuery?

2 Answers2