Question

我有一个相当复杂的表格，我为了演示而简化了。

我希望能够通过表单上的按钮添加“项目”。这部分并不太难。然后，我试图通过下拉菜单修改每个独立项目。但是，当前改变选项的方法是通过类分配每个选项。当两个类相似时，两个类都将通过一个下拉调整。

生成新字段时有没有办法分配唯一的类？

谢谢！

<script src="jQuery/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
function changeMenu(value){
    $(document).ready(function() {
        $(".change").css("display","none");
        if(value=="hardware"){
            $(".hardware").show();
            };
        if(value=="production"){
            $(".production").show();
            };
        if(value=="design"){
            $(".design").show();
            };
    });
};

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper             = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="input_fields_wrap"> <label for="item_type">Item Type: </label><br /> <select id="change[]" onchange="changeMenu(this.value)"> <option value="">Select</option> <option value="production">Production</option> <option value="design">Design</option> <option value="hardware">Harware Only</option> <option value="outsource">Outsourced</option> <option value="install">Installation</option> </select> <div class="change production" style="display:none"> <label for="item_size">Size: </label><br /> <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" /> </div> <div class="change design" style="display:none"> <label for="item_size">Dize: </label><br /> <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" /> </div> </div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});



</script>
<link href="/style.css" rel="stylesheet" type="text/css" />
<div class="input_fields_wrap">

        <label for="item_type">Item Type: </label><br />
        <select id="change[]" onchange="changeMenu(this.value)">
            <option value="">Select</option>
            <option value="production">Production</option>
            <option value="design">Design</option>
            <option value="hardware">Harware Only</option>
            <option value="outsource">Outsourced</option>
            <option value="install">Installation</option>
        </select>


    <div class="change production" style="display:none">
        <label for="item_size">Size: </label><br />
        <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" />
    </div>

    <div class="change design" style="display:none">
        <label for="item_size">Dize: </label><br />
        <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" />
    </div>
</div>
<button class="add_field_button">Add More Fields</button>

Answer 1

我已经清理了你的代码，我认为它现在正在工作。我已删除function changeMenu。

<强> HTML：

<div id="input_fields_wrap">
  <div class="input_fields_wrap">

          <label for="item_type">Item Type: </label><br />
          <select id="change[]">
              <option value="">Select</option>
              <option value="production">Production</option>
              <option value="design">Design</option>
              <option value="hardware">Harware Only</option>
              <option value="outsource">Outsourced</option>
              <option value="install">Installation</option>
          </select>


      <div class="change production" style="display:none">
          <label for="item_size">Size: </label><br />
          <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" />
      </div>

      <div class="change design" style="display:none">
          <label for="item_size">Dize: </label><br />
          <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" />
      </div>
  </div>
</div>
<button class="add_field_button">Add More Fields</button>

<强>使用Javascript：

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper             = $("#input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count

  $('#input_fields_wrap').on("change","select", function(e){ 
    $(".change").css("display","none");
    var fieldWrap = $(this).closest('.input_fields_wrap');
    fieldWrap.find("." + $(this).val()).show();
  });

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="input_fields_wrap"> <label for="item_type">Item Type: </label><br /> <select id="change[]"> <option value="">Select</option> <option value="production">Production</option> <option value="design">Design</option> <option value="hardware">Harware Only</option> <option value="outsource">Outsourced</option> <option value="install">Installation</option> </select> <div class="change production" style="display:none"> <label for="item_size">Size: </label><br /> <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" /> </div> <div class="change design" style="display:none"> <label for="item_size">Dize: </label><br /> <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" /> </div> </div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

演示：

http://code-chunk.com/chunks/543a233611342/select-product-from-drop-down-menu

Answer 2

http://jsfiddle.net/ya84hoy9/3/

你解决问题的方法对我来说是错误的。所以我改变了一下。我已经创建了该字段的模板：

<div class="input_fields_wrap" style="display:none;" id="field_template">

    <label>Item Type: </label><br />
    <select class="select-change">
        <option value="">Select</option>
        <option value="production">Production</option>
        <option value="design">Design</option>
        <option value="hardware">Harware Only</option>
        <option value="outsource">Outsourced</option>
        <option value="install">Installation</option>
    </select>

    <div class="change production" style="display:none">
        <label>Size: </label><br />
        <input type="number" name="production_width[]" autocomplete="off" style="width: 50px" value="0" />
    </div>

    <div class="change design" style="display:none">
        <label>Dize: </label><br />
        <input type="number" name="design_width[]" autocomplete="off" style="width: 60px" value="0" />
    </div>
        <button class="remove_field">x</button>
</div>

它应该在表格之外

我已为这些字段添加了占位符：

<div id="fields">      
</div>

它应该在表格内。

$(function() {
    function changeMenu(el){
        $(el).closest('.input_fields_wrap').find(".change").css("display","none");
        $(el).closest('.input_fields_wrap').find("." + el.value).show();
    };

    var max_fields      = 10; //maximum input boxes allowed
    var template             = $("#field_template");
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    addField();
    add_button.click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            addField();
        }
    });

    function addField() {
        var clone = $('#field_template').clone();
        $('#fields').append(clone.removeAttr('id').show());
    }

    $('#fields').on('change', '.select-change',function(){changeMenu(this);})

    $('#fields').on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); 
        if(x >1){
         $(this).parent('div').remove(); x--;
        }
    })
});

代码克隆模板并放入占位符

附加字段包含唯一类

2 个答案: