Question

我有一排2个选择框。使用JavaScript我可以动态添加/删除更多行的选择框 - 这非常有效：

<script type="text/javascript">
//function to add remove rows of select boxes 
$(document).ready(function() {
$(".add_ingredient").click(function(e){ //on add input button click
    e.preventDefault();
        $(".wrapper").append(
        '<div><select name="ingredient_group[]"><option value="fruits">Fruits</option><option value="vegetables">Vegetables</option></select><select name="ingredient[]"></select><a href="#" class="remove_ingredient">Remove</a></div>'
        ); //add input box
     });
$(".wrapper").on("click",".remove_ingredient", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); 
    })
});
</script>

<html>
<form method="post" action="searchrecipes.php">
 <div class="wrapper">
  <button class="add_ingredient">Add Ingredient</button>
 </div>
<div>
 <input type="submit" name="submit" value="Submit">
</div>

现在，我希望根据第一个选择框（ingredient_group []）的选择推出第二个选择框（ingredient []）（每行独立）。互联网上有一些代码段/解决方案，但在我的案例中似乎没有任何代码/解决方案。到目前为止，我的功能看起来像是：

$(document).ready(function() {
    var fruits = [{
        display: "Strawberries",
        value: "strawberries"
    }, {
        display: "Raspberries",
        value: "rapberries"
    }]
    var vegetables = [{
            display: "Broccoli",
            value: "broccoli"
        }, {
            display: "Cabbage",
            value: "cabbage"
        }]
        //If parent option is changed
    $("ingredient_group[]").change(function() {
        var parent = $(this).val(); //get option value from parent
        switch (parent) { //using switch compare selected option and populate   child
            case 'fruits':
                list(fruits);
                break;
            case 'vegetables':
                list(vegetables);
                break;
            default: //default child option is blank
                $("ingredient[]").html('');
                break;
        }
    });
    //function to populate child select box
    function list(array_list) {
        $("ingredient[]").html(""); //reset child options
        $(array_list).each(function(i) { //populate child options
            $("ingredient[]").append("<option value="
                "+array_list[i].value+"
                ">" + array_list[i].display + "</option>");
        });
    }
});

非常欢迎任何帮助/建议。谢谢！

Answer 1

在绑定var app = express(); var someMiddleware = function(req, res, next){ //here i want to know for which route it's executing for eg. if i hit my app with xyz.com/xyz/123 it will hit route defined below which i want to identify in this middleware execution }; app.get('xyz/:parameter', someMiddleware,function(req, res, next){ //some action on request });事件处理程序时，动态生成元素时使用.on()方法Event Delegation方法。
不正确的选择器，使用Attribute Value Selector即change来定位"[name='ingredient_group[]']"元素。最好分配一个公共类，然后可以使用Class Selector (“.class”)。
您需要使用当前元素上下文，即select，以便在兄弟之后立即定位.next()。
由于this是本机JavaScript数组。 array_list无效。

代码的

$(array_list)

＆＃13;

  //If parent option is changed
  $('.wrapper').on('change', "[name='ingredient_group[]']", function() {
      //get option value from parent
      var parent = $(this).val();
      var next = $(this).next("[name='ingredient[]']");
      switch (parent) {
          case 'fruits':
              list(next, fruits);
              break;
          case 'vegetables':
              list(next, vegetables);
              break;
          default: //default child option is blank
              next.empty();
              break;
      }
  });

  //function to populate child select box
  function list(next, array_list) {
      //reset child options
      next.empty();
      array_list.forEach(function(e) { //populate child options
          next.append("<option value=" + e.value + ">" + e.display + "</option>");
      });
  }

＆＃13;

$(document).ready(function() {
  $(".add_ingredient").click(function(e) { //on add input button click
    e.preventDefault();
    $(".wrapper").append('<div><select name="ingredient_group[]"><option value="fruits">Fruits</option><option value="vegetables">Vegetables</option></select><select name="ingredient[]"></select><a href="#" class="remove_ingredient">Remove</a></div>'); //add input box
  });
  $(".wrapper").on("click", ".remove_ingredient", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
  })
  var fruits = [{
    display: "Strawberries",
    value: "strawberries"
  }, {
    display: "Raspberries",
    value: "rapberries"
  }];
  var vegetables = [{
    display: "Broccoli",
    value: "broccoli"
  }, {
    display: "Cabbage",
    value: "cabbage"
  }];
  //If parent option is changed
  $('.wrapper').on('change', "[name='ingredient_group[]']", function() {
    var parent = $(this).val();
    var next = $(this).next("[name='ingredient[]']"); //get option value from parent
    switch (parent) { //using switch compare selected option and populate   child
      case 'fruits':
        list(next, fruits);
        break;
      case 'vegetables':
        list(next, vegetables);
        break;
      default: //default child option is blank
        next.empty();
        break;
    }
  });
  //function to populate child select box
  function list(next, array_list) {

    //reset child options
    next.empty();
    array_list.forEach(function(e) { //populate child options
      next.append("<option value=" + e.value + ">" + e.display + "</option>");
    });
  }
});

＆＃13;

动态创建的选择框行中的成对选择框

1 个答案: