时间戳

首页 > 解决方案 > 依赖下拉列表

javascript - 依赖下拉列表

问题描述

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

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>

索引.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 进行哪些更改以使其适用于上述更改？我被困在这里。谢谢！

标签： javascriptphphtmldrop-down-menu

解决方案

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

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

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>

推荐阅读