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

Posted 2023-05-09

【中文标题】在动态 jQuery 表单中选择特定选项时显示输入

【英文标题】：Making a input appear when specific option is selected in a dynamic jQuery form

【发布时间】：2016-12-01 00:00:48

【问题描述】：

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

此代码每次单击按钮时都会显示一个表单，您可以单击“删除”将其删除。

The problem is: I need an input to appear (one per form) when the option "Other" is selected.如果您选择“选项 1”、“选项 2”或“选项 3”，则使其消失。

您可以在此处查看代码：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(););
)

);

任何想法，建议？ :(

【参考方案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/，它按预期工作。

我对您的代码进行了一些更新：向输入添加了一个类，以便能够选择它并使用显示属性隐藏它。此外，为了检测选择事件，我使用 .on("change", evtHandler) 通过 jQuery 添加了选择侦听器。 .off("change") 是必需的，以便在添加新侦听器之前重置更改侦听器。

当然，您也可以（我建议这样做）在单独添加和附加每个元素上的 eventListener 之前单独创建元素，而不是使用示例中提供的更广泛的 $("select") jQuery 寻址。

【讨论】：

太棒了！这就是我要的。默认情况下，出现和消失的输入应该是隐藏的，但是没关系：）谢谢先生！

【参考方案2】：

您可以制作一个不显示的按钮，并在选择的选项为“其他”时使用 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 的工作原理很有帮助:)