jQuery select add update and remove

Question

xample: considering that i have 2 hotel rooms that can be sold with 2 options BB or HB, when I change the option of select 1 (taking 1 room in BB) or I change the option of select 2 (taking 1 room in HB, selecting again option 1 or option 2 the number of rooms still available must result as only 1

<script>
$(document).ready(function() {
  $('#rates1').change(function() {
    var val = parseInt($(this).val());
    var optionlength = ($('#rates1 option').length);
    var optionremove = optionlength - val - 1;
    //alert(optionremove);
    $('#rates2 option').remove();
  });
});
</script>


<select id="rates1" class="selectclass">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

</select><br />
<select id="rates2" class="selectclass">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

I don't understand your requirement. Please elaborate and provide the jQuery code that you've tried to write to solve this problem. — user1477388, Aug 28 '13 at 14:19
If you want a dynamic data in dependent combos use this solution: http://stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-and-se — Andre Figueiredo, Aug 28 '13 at 16:13

score 0 · Answer 1 · answered Aug 28 '13 at 15:04

As per my understanding, you want to show the options in select2 based on select1.

If that is your point then, try this

<select id="rates1" class="selectclass">
    <option value="0">0</option>
    <option value="50">1</option>
    <option value="100">2</option>
</select>
<select id="rates2" class="selectclass">
    <option data-rates1="1" value="0">0</option>
    <option data-rates1="1"  value="80">1</option>
    <option data-rates1="2" value="160">2</option>
</select>

JS:

$('#rates1').on('change', function () {
    if ((this.value === '0') || (this.value === '50')) {
        $('#rates2 option[data-rates1=1]').show();
        $('#rates2 option[data-rates1=2]').hide();
    }
    else {
        $('#rates2 option[data-rates1=1]').hide();
        $('#rates2 option[data-rates1=2]').show();

    }
});

Check out this fiddle

You may get confused of data-rates, it is nothing but custom data attributes in HTML5.

Hope you get my point.

score 0 · Answer 2 · edited May 23 '17 at 10:25

The question is unclear, so I'm going to interpret it as: when an option in the first <select> tag is chosen, change the options available to select in the second <select> tag.

NOTE: you can't use the same id attribute for more than one item; the purpose of id's is to uniquely define a single item. In this case, I'll refer to the first <select> tag as id="selectid1" and the second <select> tag as id="selectid2".

Try this code to remove the option "1" from the second select tag when the option "1" is selected in the first select tag: (jsfiddle demo)

$("#selectid1").change(function () {
    var selected_value = $("#selectid1 option:selected").val();

    // adds the default options each time the .change() handler is fired
    $("#selectid2").html("<option value=\"0\">0</option><option value=\"80\">1</option><option value=\"160\">2</option>");

    if (selected_value == 50) {
        $("#selectid2 option[value='80']").remove();
    }
});

The main takeaway is the .change() handler to detect when the selection has changed, and the syntax for selecting an option by value, which I found from this question.

jQuery select add update and remove

2 Answers2