时间戳

首页 > 解决方案 > Onchange 选择框显示输入框使用jQuery

javascript - Onchange 选择框显示输入框使用jQuery

问题描述

我有一个使用 jquery 显示输入框 onChange 的简单代码。

<select id="selectBox" onchange="changeFunc();">
    <option value="MCA">MCA</option>
    <option value="MBA">MBA</option>
    <option value="not_listed">Not Listed</option>
</select>

<input name="dd_number" placeholder="Add New" class="form-control" type="text" style="display: none" id="textboxes">
<script type="text/javascript">
    function changeFunc() {
        var selectBox = document.getElementById("selectBox");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        if (selectedValue == "not_listed") {
            $('#textboxes').show();
        } else {
            alert("Error");
            $('#textboxes').hide();
            }
        }
</script>

使用此代码，我只能在选择字段的选择选项上添加一个 ( 1 ) 输入框。我需要一个多选但不工作。问题出在哪里？如果我想选择 4 个选择选项，我想显示 4 个输入框，或者如果我单击 2 个选择选项以显示 2 个输入框。谢谢大家的帮助！

使用 PHP 函数进行代码编辑：

<div class="col-md-6 mb-3">
<label>Choose dimension product</label>
<select class="select2" name="size_id[]" multiple id="selectBox" onchange="changeFunc();">
    <?php
        $get_sizes = "select * from sizes";
        $sizes = mysqli_query($con,$get_sizes);
        while($row_size = mysqli_fetch_array($sizes)){
        $size_id = $row_size['id_size'];
        $size_name = $row_size['product_size'];
        $i++;
    ?>
    <option value="not_listed"><?php echo $size_name; ?></option>
<?php } ?>
</select>
<div class="col-md-3 mb-3">
    <input name="<?php echo $size_name; ?>" placeholder="Product price" class="form-control" type="text" style="display: none" id="textboxes">
    <script type="text/javascript">
    function changeFunc() {
    document.getElementById('textboxcont').innerHTML = '';
    var selectBox = document.getElementById("selectBox");
    var selectedValues = Array.from(document.getElementById('selectBox').selectedOptions).map(el=>el.value);
    //alert(selectedValues)
    for( var i = 0; selectedValues.length > i; ++i ) {
    var i1 = document.createElement("input");
    i1.setAttribute("type", "text");
    i1.setAttribute("name", "<?php echo $size_name; ?>"); 
    // you may want to change this
    // add the file and text to the div
    document.getElementById('textboxcont').appendChild(i1);
    }
    }
    </script>
    </div>

标签： javascriptjquery

解决方案

您可能想要动态添加文本输入，无论如何您都可以添加 4 个输入并显示隐藏它们，但这是我认为您正在尝试实现的示例。对于多选，您可以使用 select2 之类的插件，也可以使用如下所示的多选。

function changeFunc() {
  document.getElementById('textboxcont').innerHTML = '';
  var selectBox = document.getElementById("selectBox");
  var selectedValues = Array.from(document.getElementById('selectBox').selectedOptions).map(el=>el.value);
  //alert(selectedValues)
  for( var i = 0; selectedValues.length > i; ++i ) {
      var i1 = document.createElement("input");
      i1.setAttribute("type", "text");
      i1.setAttribute("name", "dd_number"); 
      // you may want to change this
      // add the file and text to the div
      document.getElementById('textboxcont').appendChild(i1);
  }
}
<select id="selectBox" onchange="changeFunc();" multiple>
    <option value="MCA">MCA</option>
    <option value="MBA">MBA</option>
    <option value="not_listed">Not Listed</option>
</select>

<div id="textboxcont">

</div>

推荐阅读