Question

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

PHP

/api/crossword

Index.js

Session.objects.all().delete()

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

因此，我修改了（所有选项）的值：

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

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

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

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

但是很显然，使用此脚本后，我的脚本不会触发select2的更改。

我应该对index.js进行哪些更改以使其与上述更改一起使用？我被困在这里。谢谢！

Answer 1

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

检查value是否以#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>

Answer 2

我注意到的第一件事是您的JS变量名中的$

更改

var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),

到

var select1 = $( '#select1' ),
select2 = $( '#select2' ),

Answer 3

我假设您只希望显示属于父项的选项。

您可能要考虑给select2一个data-{name}属性，例如data-parent。之后，您可以使用getAttribute()来查看select1中的哪个父选项。

但可能更好，您可以创建3个单独的选择，并在选择某个父选项时显示或隐藏它们。不过不要给他们相同的id或name属性。因为它们不显示并不表示它们不存在。它们的ID相同会引起问题，相似的东西在发送选择数据时会出错。

从属下拉列表

3 个答案: