链接选择 - 委托动态添加选择

时间:2014-03-25 07:33:57

标签: javascript jquery

我正在使用chained selects。我需要做的是使用用户动态添加的多个选项,但它不会起作用。 Here是一个包含多个链式选择的演示页

这是一个小提琴手: http://jsfiddle.net/5qLfn/

这里的代码:

  <form>
    <select class="mark-remote" name="mark">
      <option value="">--</option>
      <option value="bmw">BMW</option>
      <option value="audi">Audi</option>
    </select>
    <select class="series-remote" name="series">
      <option value="">--</option>
    </select>
    <select class="model-remote"  name="model">
      <option value="">--</option>
    </select>
    <select class="engine-remote" name="engine">
      <option value="">--</option>
    </select>

    <button id="button-remote" type="submit">Button</button>
  </form>
  <form>
    <select class="mark-remote" name="mark">
      <option value="">--</option>
      <option value="bmw">BMW</option>
      <option value="audi">Audi</option>
    </select>
    <select class="series-remote" name="series">
      <option value="">--</option>
    </select>
    <select class="model-remote"  name="model">
      <option value="">--</option>
    </select>
    <select class="engine-remote" name="engine">
      <option value="">--</option>
    </select>

    <button id="button-remote" type="submit">Button</button>
  </form>
  <form>
    <select class="mark-remote" name="mark">
      <option value="">--</option>
      <option value="bmw">BMW</option>
      <option value="audi">Audi</option>
    </select>
    <select class="series-remote" name="series">
      <option value="">--</option>
    </select>
    <select class="model-remote"  name="model">
      <option value="">--</option>
    </select>
    <select class="engine-remote" name="engine">
      <option value="">--</option>
    </select>

    <button id="button-remote" type="submit">Button</button>
  </form>

/* For multiple jquery.chained.js */
$(".series").each(function() {
    $(this).chained($(".mark", $(this).parent()));
});
$(".model").each(function() {
    $(this).chained($(".series", $(this).parent()));
});
$(".engine").each(function() {
    $(this).chained([
        $(".series", $(this).parent()),
        $(".model", $(this).parent())
    ]);
});

它对我来说是静态选择。但是当我尝试用这样的jquery添加新级别时它不会起作用:

$("#ql_add_case_schema").on("click", function () {
    var select='\
                <div class="container">\n\
                    <div class="row clearfix">\n\
                        <div class="col-md-1 column">\n\
                            USUN\n\
                        </div>\n\
                        <div class="col-md-2 column">\n\
                            <select class="mark-remote" name="mark"><option value="">--</option><option value="bmw">BMW</option><option value="audi">Audi</option></select>\n\
                        </div>\n\
                        <div class="col-md-2 column">\n\
                            <select class="series-remote" name="series"><option value="">--</option></select>\n\
                        </div>\n\
                        <div class="col-md-2 column">\n\
                            <select class="model-remote"  name="model"><option value="">--</option></select>\n\
                        </div>\n\
                        <div class="col-md-2 column">\n\
                            <select class="engine-remote" name="engine"><option value="">--</option></select>\n\
                        </div>\n\
                    </div>\n\
                </div>\n\
                </div>';

    $('#ql_div_kodowania').append(select);
});

0 个答案:

没有答案