使用javascript在第二个选择表单中仅显示相关项目

Question

I'm writing a small php page with 2 form:

<div class="input-field col s12">
    <select id="select1">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
        <select id="select2">
        <option value="" disabled selected>Choose your option</option>
        <option rel="1" value="11">Option 11</option>
        <option rel="1" value="12">Option 12</option>
        <option rel="2" value="21">Option 21</option>
        <option rel="2" value="22">Option 22</option>
        <option rel="3" value="31">Option 31</option>
        <option rel="3" value="32">Option 32</option>
    </select>
</div>  

After I select the first select form, I want that only the related values are showed in the second.

My js is:

$(function() {
$("#select1").on('change', function() {

    $subcat = $("#select2");
    var _rel = $(this).val();

    $subcat.find("[rel="+_rel+"]").show();
    $subcat.prop("disabled",false);


    // re-initialize material-select
    $('#select2').material_select();


   });
});

I also try with

var selectobject=document.getElementById("select2")
    for (var i=0; i<selectobject.length; i++)
    {
        if (selectobject.options[i].value == 'xxxx' )
        {
            selectobject.remove(i);
        }           
    }

But I need the name option, not the value.

Answer 1

$(function(){
$('#select1').on('change', function(){
    var val = $(this).val();
    var sub = $('#select2');
    $('option', sub).filter(function(){
        if ($(this).attr('rel') === val) {
          if ($(this).parent('span').length) {
            $(this).unwrap();
          }
        } else {
          if (!$(this).parent('span').length) {
            $(this).wrap( "<span>" ).parent().hide();
          }
        }
    });
});

});