Question

我是一个jQuery noob，我陷入了这个问题。

每次单击按钮时，此代码都会显示一个表单，您可以单击＆＃34;删除＆＃34;

删除它。

问题是：当选项＆＃34;其他＆＃34;时，我需要输入一个输出（每个表单一个）。被选中。如果您选择＆＃34;选项1＆＃34;，＆＃34;选项2＆＃34;并使其消失或＆＃34;选项3＆＃34;。

您可以在此处查看代码：https://jsfiddle.net/9dgr9e3s/1/

HTML

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>`

脚本jQuery

$(document).ready(function() {
var max_fields      = 10; //maximum forms 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 form button click
    e.preventDefault();
    if(x < max_fields){ //max forms box allowed
        x++; //text box increment
        $(wrapper).append('<div></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
        Select <select name="username" onchange="update()">\
        <option value="1">Option1</option>\
        <option value="2">Option2</option>\
        <option value="3">Option3</option>\
        <option value="4">Other</option>\
    </select><input type="hidden">\
    <a href="#" class="remove_field">Remove</a></div>'); //add form
    }
});

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

});

有什么想法，建议吗？：（

Answer 1

$(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></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
        Select <select name="username">\
        <option value="1">Option1</option>\
        <option value="2">Option2</option>\
        <option value="3">Option3</option>\
        <option value="4">Other</option>\
    </select><input class="optional-input" style="display:none"/>\
    <a href="#" class="remove_field">Remove</a></div>'); //add form
    $("select").off("change");
  $("select").on("change", function(e){
      var selEl = $(e.currentTarget);
      var inputSel = "input.optional-input";
      if (e.currentTarget.value == 4) {
        //alert("other clicked");

        selEl.parent().find(inputSel).show();
      } else {
        //alert("option clicked");
        selEl.parent().find(inputSel).hide();
      }
      });
    }
});

我在这里尝试了这个：https://jsfiddle.net/9dgr9e3s/11/并且按预期工作。

我对您的代码进行了一些更新：在输入中添加了一个类，以便能够选择它并使用display属性隐藏它。另外，为了检测选择事件，我使用.on（“change”，evtHandler）通过jQuery添加了选择监听器。需要.off（“change”）以便在添加新的侦听器之前重置更改侦听器。

当然，你可以（我推荐这个）在单独创建元素之前，分别在每个元素上添加和附加eventListener，而不是使用示例中提供的更广泛的$（“select”）jQuery寻址。 p>

Answer 2

您可以创建一个显示为none的按钮，当选择的选项为“其他”时，使用javascript显示该按钮。

类似的东西：

<style>
    .form button {
       display: none;
    }
</style>

<!-- You form here with button-->
<form class='form'>
    <select class='my-select-changer'>
            <option>Option1</option>
            <option>Other</option>
    </select>
    <button class='button-to-hide'></button>
</form>

<script type='text/javascript'>  
    $(".my-select-changer").change( function() {
        var selectedValue = $(this).val();
        var nextButton = $(this).next('.button-to-hide');

        if (selectedValue == "Other") {
            nextButton.show();
        } else {
            nextButton.hide();
        }
    });
</script>

我希望它会对你有所帮助。

在动态jQuery表单中选择特定选项时，将显示输入

2 个答案: