Dynamic Dropdown Lists (JSFiddle Included)

Question

I have two dropdown lists as shown in the below JSFiddle:

HTML:

<select id="first-choice">
   <option value="English">English</option>
   <option value="Spanish">Spanish</option>
 </select>

<select id="second-choice">
   <option value="Spanish">Spanish</option>
   <option value="English">English</option>
 </select>

JS:

$("#first-choice").change(function() {
    var userSelected = $(this).val()
    alert(userSelected);
});

What I'm trying to do is as follows: If the users first-choice is English, then only display Spanish as an option in the second-choice dropdown. If the users first-choice is Spanish, then only display English in the second-choice dropdown.

Any thoughts on how to do this. Normally I would use an AJAX request and then catch the user selected paramater in the controller but since this is a devise registrations controller I've had issues overriding it.

http://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery — Sherali Turdiyev, Sep 05 '15 at 19:17

score 2 · Accepted Answer · answered Sep 05 '15 at 19:44

If I understand your question, just use this. it's easy: https://jsfiddle.net/sherali/jkw8fxzf/12/

var $secondOption= $('#second-choice>option').clone();

$("#first-choice").change(function() {
    var userSelected = $(this).val();

    $('#second-choice').html($secondOption);

   // $("#second-choice").val(userSelected)
    $('#second-choice option[value="'+userSelected+'"').remove()
});

Georgi Naumov · Answer 2 · 2015-09-05T20:02:17.160

I have changed your jsFiddle. Here is the code:

$("#first-choice").change(function() {
    var userSelected = $(this).val();
    var otherOption =  $('#second-choice option[value!="' + userSelected + '"]').get(0);
    $('#second-choice').get(0).selectedIndex = otherOption.index;
});

And here is link to new fiddle:

https://jsfiddle.net/jkw8fxzf/11/

But if you want other select to contains only 'other' option you must keep data for other option somewere. Here is other jsfiddle.

https://jsfiddle.net/jkw8fxzf/18/

and other solution:

$("#first-choice").change(function _optionHandler() {
    var userSelected = $(this).val();
    var second =  $('#second-choice');
    if(typeof _optionHandler.oldOption != 'undefined') {
        $("<option/>", {
            text: _optionHandler.oldOption.text,
            value: _optionHandler.oldOption.value
        }).appendTo(second);
        delete _optionHandler.oldOption;
    }
    var otherOption =  $('#second-choice > option[value!="' + userSelected + '"]').get(0);
   second.get(0).selectedIndex = otherOption.index;
    var optionToRemove = $('#second-choice > option[value="' + userSelected + '"]');
    _optionHandler.oldOption = {
        text: optionToRemove.text(),
        value: optionToRemove.val()
    }
    optionToRemove.remove();
});

I hope this helps.

score 0 · Answer 3 · answered Sep 05 '15 at 19:36

You could dynamically append data into second-choice like this...

<select id="first-choice">
   <option value="English">English</option>
   <option value="Spanish">Spanish</option>
</select>

<select id="second-choice">

</select>

JS:

$("#first-choice").change(function() {
    var userSelected = $(this).val()
    if($(this).val() == "English"){
        var element = "option";
        var val = "Spanish";
        var html = "<"+element+" value='"+val+"'>"+val+"</"+element+">";
    $("#second-choice").empty();
    $("#second-choice").append(html);

    }
    else if($(this).val() == "Spanish"){
        var element = "option";
        var val = "English";
        var html = "<"+element+" value='"+val+"'>"+val+"</"+element+">";
        $("#second-choice").empty();
        $("#second-choice").append(html);
    }
});

JsFiddle

score 0 · Answer 4 · answered Sep 05 '15 at 19:52

I'm also including an extra part in case you would like this to work the other way round.

$("#first-choice").change(function() {
    var selected = $(this).val()
    if(selected== "English"){
        $("#second-choice option[value='Spanish']").attr("selected","selected");
    }
    else if(selected == "Spanish"){
        $("#second-choice option[value='English']").attr("selected","selected");
    }
});

$("#second-choice").change(function() {
    var selected = $(this).val()
    if(selected== "English"){
        $("#first-choice option[value='Spanish']").attr("selected","selected");
    }
    else if(selected == "Spanish"){
        $("#first-choice option[value='English']").attr("selected","selected");
    }
});

Fiddle: https://jsfiddle.net/uyf7uprd/1/

Dynamic Dropdown Lists (JSFiddle Included)

4 Answers4