过滤三个下拉菜单并将数据上传到服务器

Question

通过使用这个代码我创建了两个下拉和一个基础的第一个，尝试过滤第二个，如果我选择软件问题在第一个下拉，在第二个下拉只有我想要的两个数据，主数据和应用程序崩溃。同样的硬件只有2台打印机和机器。 一旦选择第二个打印机，那么只有一个数据打印不会进入第三个下拉。

  <tr>
    <td>
        <b>Issue</b>
        <br>
    </td>
    <td>
      <select name="select-native-1" id="store_issue" data-iconpos="left">
        <option value="No Issue">No Issue</option>
        <option value="Software Issue">Software Issue</option>
        <option value="Hardware Issue">Hardware Issue</option>

      </select>
      <br>
    </td>
  </tr>

    <tr>
        <td>
            <b>Type</b>
            <br>
        </td>
        <td>
           <select name="select-native-2" id="store_issue_type" data-iconpos="left">

           <option value="Master data">Master data</option>
           <option value="crash">App Crash</option>
           <option value="Printer">Printer</option>
           <option value="Machine">Machine</option>

      </select>
       <br>
       </td>
    </tr>

        <tr>
        <td>
            <b>Details</b>
            <br>
        </td>
        <td>
           <select name="select-native-3" id="store_issue_details" data-iconpos="left">

           <option value="data ussue">Data Isse</option>
           <option value="App crash">App crash</option>
           <option value="print not coming">Print not coming</option>
           <option value="Machine not getting on">Machine not getting on</option>

      </select>
         <br>
      </td>
   </tr>

下面是我的js代码..，但它不起作用

    <script>

$("#select1").change(function() {
  if ($(this).data('options') === undefined) {
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});

    </script>

Answer 1

您可以轻松地使用jQuery动态添加和删除其他选项中的选项。只是为了给你一个想法，这是一个例子;

$(function() {

	$('#store_issue').on('change', function() {
  	$('#store_issue_type').empty();
    $('#store_issue_details').empty();
    
  	switch($(this).val()) {
      case "Software Issue":
      	$('#store_issue_type')
        	.append($('<option value="Master data">Master data</option>'))
          .append($('<option value="crash">App Crash</option>'));
          break;
      case "Hardware Issue":
      	$('#store_issue_type')
        	.append($('<option value="Printer">Printer</option>'))
          .append($('<option value="Machine">Machine</option>'));
    }     	
  });
  
  $('#store_issue_type').on('change', function() {
  	$('#store_issue_details').empty();
    
    switch($(this).val()) {
    	case "Master data":
     		$('#store_issue_details')
        	.append($('<option data-sel="Master data" value="data ussue">Data Isse</option>'));
          break;
      case "crash":
      	$('#store_issue_details')
        	.append($('<option data-sel="crash" value="App crash">App crash</option>'));
          break;
      case "Printer":
      	$('#store_issue_details')
        	.append($('<option data-sel="Printer" value="print not coming">Print not coming</option>'));
          break;
      case "Machine":
      	$('#store_issue_details')
        	.append($('<option data-sel="Machine" value="Machine not getting on">Machine not getting on</option>'));
          break;
    }    
  });
});

select {
  min-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <b>Issue</b>
    <br>
  </td>
  <td>
    <select name="select-native-1" id="store_issue" data-iconpos="left">
      <option value="No Issue">No Issue</option>
      <option value="Software Issue">Software Issue</option>
      <option value="Hardware Issue">Hardware Issue</option>


    </select>
    <br>
  </td>
</tr>



<tr>
  <td>
    <b>Type</b>
    <br>
  </td>
  <td>
    <select name="select-native-2" id="store_issue_type" data-iconpos="left">

    </select>
    <br>
  </td>
</tr>


<tr>
  <td>
    <b>Details</b>
    <br>
  </td>
  <td>
    <select name="select-native-3" id="store_issue_details" data-iconpos="left">

    </select>
    <br>
  </td>
</tr>

Answer 2

尝试基于第一个下拉选择的disable和enable选项。请查看下面的代码段以供参考。我只采样了两个选择。

$('#select2 option').prop('disabled', true);
$('#select2').find('.'+ $('#select1').val()).prop('disabled', false);
$('#select1').change(function() {
  $('#select2 option').prop('disabled', true);
  $('#select2').find('.' + $(this).val()).prop('disabled', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<select id="select2">
  <option class="option1">Option 1</option>
  <option class="option1">Option 1</option>
  <option class="option1">Option 1</option>
  <option class="option2">Option 2</option>
  <option class="option2">Option 2</option>
  <option class="option3">Option 3</option>
</select>

Answer 3

尝试这样的事情：

$("#store_issue").change(function() {
  var v = $(this).val().replace(" Issue", "")
  $("#store_issue_type option").show().not("[data-sel=" + v + "]").hide();
  $("#store_issue_type").val($("#store_issue_type option[data-sel=" + v + "]:first()").first().val())
})

$("#store_issue_type").change(function() {
  var v = $(this).val()
  $("#store_issue_details option").show().not("[data-sel='" + v + "']").hide();
  $("#store_issue_details").val($("#store_issue_details option[data-sel='" + v + "']:first()").first().val())
})

演示

$("#store_issue").change(function() {
  var v = $(this).val().replace(" Issue", "")
  $("#store_issue_type option").show().not("[data-sel=" + v + "]").hide();
  $("#store_issue_type").val($("#store_issue_type option[data-sel=" + v + "]:first()").first().val())
})

$("#store_issue_type").change(function() {
  var v = $(this).val()
  $("#store_issue_details option").show().not("[data-sel='" + v + "']").hide();
  $("#store_issue_details").val($("#store_issue_details option[data-sel='" + v + "']:first()").first().val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <b>Issue</b>
      <br>
    </td>
    <td>
      <select name="select-native-1" id="store_issue" data-iconpos="left">
          <option value="No Issue">No Issue</option>
        <option value="Software Issue">Software Issue</option>
        <option value="Hardware Issue">Hardware Issue</option>


    </select>
      <br>
    </td>
  </tr>



  <tr>
    <td>
      <b>Type</b>
      <br>
    </td>
    <td>
      <select name="select-native-2" id="store_issue_type" data-iconpos="left">

               <option data-sel="Software" value="Master data">Master data</option>
               <option data-sel="Software" value="crash">App Crash</option>
               <option data-sel="Hardware" value="Printer">Printer</option>
               <option data-sel="Hardware" value="Machine">Machine</option>

    </select>
      <br>
    </td>
  </tr>


  <tr>
    <td>
      <b>Details</b>
      <br>
    </td>
    <td>
      <select name="select-native-3" id="store_issue_details" data-iconpos="left">

               <option data-sel="Master data" value="data ussue">Data Isse</option>
               <option data-sel="crash" value="App crash">App crash</option>
               <option data-sel="Printer" value="print not coming">Print not coming</option>
               <option data-sel="Machine" value="Machine not getting on">Machine not getting on</option>

    </select>
      <br>
    </td>
  </tr>
</table>