论变革选择不佳

Question

我试着做一个简单的选择，生成下一个选择框.但我似乎不能让它起作用

因此，如您所见，当我单击第一个select时，我将生成带有ID和父值的div，值生成带有div和父值的下一个选择框。

这是jQuery，但出于某种原因，我不明白为什么它不能工作。

​

$(document).ready(function() {
  var i = 1;
  var t = '#ss' + i;
  $(t).change(function() {
    i++;
    t = '#ss' + i;
    var pick = $(this).val();
    $('#picks div').each(function() {
      if ($(this).attr('parent') == pick) {
        $('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');
      }
      $('#ss' + i).removeAttr('disabled');
    })
    console.log(t);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='picks'>
  <div id='29' parent='26'>Pick1</div>
  <div id='30' parent='29'>Pick11</div>
  <div id='31' parent='26'>Pick</div>
</div>

<select id="ss1">
        <option >First pick</option>
        <option value="26">Angri</option>
        <option value="27">lands</option>
        <option value="28">tree</option>
    </select>
<select id="ss2" disabled>
        <option >Secound Pick</option>
    </select>
<select id="ss3" disabled>
        <option>Third Pick</option>
    </select>

​

这里是一个jsfiddle 小提琴

Answer 1

这就是你拍摄的目的吗？https://jsfiddle.net/6c5t8ort/

几件事，

var t = '#ss' + i; $(t).change(function() {

这只会将change事件添加到第一个下拉列表中。如果您给jQuery一个选择器(类)，则If将将事件添加到所有元素中。此外，设置i变量的方式意味着每次更改都会增加。

Answer 2

下面的代码仅将更改侦听器附加到第一个ss ss1，因此在更改ss2时永远不会调用更改函数。

  var i = 1;
  var t = '#ss' + i;
  $(t).change(function() {

您可以通过在每个选择中添加一个类并使用$(".myClass").change(function() {来修复这个问题。

或者，只需将侦听器附加到所有选择的$("select").change(function() {

此外，option标记的值不包括“父”号。在本例中，它将是Pick、Pick1或Pick11。

$('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');