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

我正在用2个表单编写一个小php页面：

<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>  

我也试着用

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

---

但是我需要的是名称选项，而不是值。

我看不出第二个表单中与第一个表单对应的选项，但是，请尝试填充第二个选择，而不是从中删除项目。比如：

<select id="select1" onchange="myfunction(this.value)">
<script>
function myfunction(opt){
var $Select2 = $('#select2');
var option1 =  [
    {
      "name": "option description", 
      "value": "1"
    }, {
      "name": "option description", 
      "value": "1"
    }]
var option2 =  [
    {
      "name": "option description", 
      "value": "1"
    }, {
      "name": "option description", 
      "value": "1"
    }]
if(opt === option1){
$.each(option1, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.name 
    }));
});
}
if(opt === option2){
$.each(option2, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.name
    }));
});
}
}
</script>

})

<select id="select1" onchange="myfunction(this.value)">
<script>
function myfunction(opt){
var $Select2 = $('#select2');
var option1 =  [
    {
      "name": "option description", 
      "value": "1"
    }, {
      "name": "option description", 
      "value": "1"
    }]
var option2 =  [
    {
      "name": "option description", 
      "value": "1"
    }, {
      "name": "option description", 
      "value": "1"
    }]
if(opt === option1){
$.each(option1, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.name 
    }));
});
}
if(opt === option2){
$.each(option2, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.name
    }));
});
}
}
</script>

$(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();
          }
        }
    });
});