javascript - 依赖下拉列表

Question

我使用以下代码创建了一个依赖下拉列表:

PHP

<div class="col-xs-6">
  <select class="form-control" name="select1" id="select1">
   <option value="1">Fruit</option>
   <option value="2">Animal</option>
   <option value="3">Bird</option>
   <option value="4">Car</option>
  </select>
</div>
<div class="col-xs-6">
  <select class="form-control" name="select2" id="select2">
   <option value="1">Banana</option>
   <option value="1">Apple</option>
   <option value="1">Orange</option>
   <option value="2">Wolf</option>
   <option value="2">Fox</option>
   <option value="2">Bear</option>
   <option value="3">Eagle</option>
   <option value="3">Hawk</option>
   <option value="4">BWM<option>
  </select>
</div>

Index.js

var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
$options = $select2.find( 'option' );

$select1.on( 'change', function() {
     $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

现在我想检索标记之间的文本值，而不仅仅是值。

所以我修改了值，例如(对于所有选项):

 <option value="1|Fruit">Fruit</option>

我将使用以下方式检索它:

 $test1 = explode('|', $_POST['select1']);
 $test2 = explode('|', $_POST['select2']);

但显然在使用这个之后我的脚本不会触发 select2 的更改。

我应该对 index.js 进行哪些更改才能使其适应上述更改？我被困在这里了。谢谢!

Answer 1

使用split()函数将数字与#select1选项的值分开。

检查值是否以#select2中的数字开头( attribute^=value )

var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' );

$select1.on( 'change', function() {
 $select2.html( $options.filter( '[value^="' + (this.value).split("|")[0] + '"]' ) );
} ).trigger( 'change' );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
  <select class="form-control" name="select1" id="select1">
   <option value="1|Fruit">Fruit</option>
   <option value="2|Animal">Animal</option>
   <option value="3|Bird">Bird</option>
   <option value="4|Car">Car</option>
  </select>
</div>
<div class="col-xs-6">
  <select class="form-control" name="select2" id="select2">
   <option value="1|Banana">Banana</option>
   <option value="1|Apple">Apple</option>
   <option value="1|Orange">Orange</option>
   <option value="2|Wolf">Wolf</option>
   <option value="2|Fox">Fox</option>
   <option value="2|Bear">Bear</option>
   <option value="3|Eagle">Eagle</option>
   <option value="3|Hawk">Hawk</option>
   <option value="4|BMW">BWM<option>
  </select>
</div>