Question

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

下面是我的js代码..，但它不是vorking

Answer 1

根据第一个下拉选项，尝试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 2

尝试这样的事情：

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

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以轻松地使用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>

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

3 个答案: