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>

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

因此，我修改了如下值（，用于所有选项）：

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

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

使用

split（）

函数从

的
值中分离数字
#选择1

选项

检查

值是否以
中的该数字开头#选择2
（）


var$select1=$（'#select1'），
$select2=$（“#select2”），
$options=$select2.find（'option'）；
$select1.on（'change'，function（）{
$select2.html（$options.filter（'[value^=“”+（this.value）.split（“|”）[0]+'“]）；
}）。触发器（‘更改’）

果
动物
鸟
汽车
香蕉
苹果
橙色
狼
福克斯
熊
鹰
鹰派
BWM
使用
split（）
函数从
的
值中分离数字
#选择1
选项

检查
值是否以
中的该数字开头#选择2
（）


var$select1=$（'#select1'），
$select2=$（“#select2”），
$options=$select2.find（'option'）；
$select1.on（'change'，function（）{
$select2.html（$options.filter（'[value^=“”+（this.value）.split（“|”）[0]+'“]）；
}）。触发器（‘更改’）

果
动物
鸟
汽车
香蕉
苹果
橙色
狼
福克斯
熊
鹰
鹰派
BWM
我假设您只希望显示属于父级的选项

您可能需要考虑给出<代码>选择项2/代码> A<代码>数据-{Ne}} /Case>属性，如<代码>数据父< /代码>。之后，您可以使用
getAttribute（）
查看
select1
中的父选项

但可能更好的是，您可以创建3个单独的选择，并在选择某个父选项时显示或隐藏它们。但不要给他们相同的
id
或
name
属性。因为它们不显示并不意味着它们不存在。如果它们是相同的，则它们的ID会导致问题。当发送select数据时，它们的ID会出错。
我假设您只希望显示属于父项的选项

您可能需要考虑给出<代码>选择项2/代码> A<代码>数据-{Ne}} /Case>属性，如<代码>数据父< /代码>。之后，您可以使用
getAttribute（）
查看
select1
中的父选项

但可能更好的是，您可以创建3个单独的选择，并在选择某个父选项时显示或隐藏它们。但不要给他们相同的
id
或
name
属性。因为它们不显示并不意味着它们不存在。如果它们是相同的，那么它们的ID就会出现问题。当发送select数据时，它们的ID会出错。
我注意到的第一件事是JS中变量名中的$

改变

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

到

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

改变

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

到

你好我还更改了select2的值。巴纳纳感谢你这么快的反应！你好我还更改了select2的值。巴纳纳感谢你这么快的反应！我不确定这是否是最好的方法，因为它会导致大量数据重复，因为
select1
中的每个选项都会得到一个单独的select，其中只包含属于该特定父级的可用选项（在本例中，每个选项都是3个）。但我可能不明白你想要实现什么。您还可以将第一个选项与
getAttribute（）
一起使用，我不确定这是否是最好的方法，因为它会导致大量数据重复。您确定吗，因为
select1
中的每个选项都会得到一个单独的选择，其中只包含属于该特定父级的可用选项（在本例中，每个选项都是3个）. 但我可能不明白你想要实现什么。您还可以在
getAttribute（）中使用第一个选项
 $test1 = explode('|', $_POST['select1']);
 $test2 = explode('|', $_POST['select2']);

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

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