Question

我在html的下拉列表中有三个选项。现在，在下拉列表中选择每个选项时，我希望动态创建不同的输入类型。

首先是下拉列表中的选项：

<select  name="choicetosearch">

    <option value="None" style="display:none;">
        ---None---
    </option>

    <option value="searchName">
        Notification Sender
    </option>

    <option value="searchType">
        Notification Type  
    </option>

    <option value="searchDate">
        Notification Date  
    </option>

    </select>

现在，在选择Notification Sender时，我希望显示一个文本框。

选择Notification Type时，我希望显示两个复选框。

选择Notification Date时，我想要显示两个日期类型输入字段。

如何做到这一点？请帮助。

Answer 1

使用“onchange”元素的“select”属性来跟踪dropDown中元素的更改。要添加元素，首先要生成一些像这样的东西 -

var elem = '<b> hey</b>;

然后你可以在jQuery中使用'append(elem)'函数或在javascript中使用'appendChild(elem)'。

我没有给你代码，所以你可以试试，但如果它仍然不起作用，请ping我，我会分享代码。

这是一个演示 -

http://jsfiddle.net/RcfNL/2/

添加它，你可以使用这个 -

获得下拉列表的选定值

  var city_name = $('#city option:selected').text();

根据该值，您可以执行所需的操作。

Answer 2

你真的需要学习一些javascript，因为你甚至没有提供任何解决这个问题的知识。无论如何，您需要根据html标记中的选择框创建要显示/隐藏的字段，并通过css隐藏它们。之后，您必须在选择框上使用on change js事件并检查所选选项。你现在可以隐藏/显示你需要的盒子。

选中此Example

JS：

$('.search-select').on('change', function(){
  $('.search-inputs').children().hide();
  var classn =$(this).find(":selected").val();
  $('.'+classn).show();
})

HTML：

<select class="search-select" name="choicetosearch">

<option value="None">
    ---None---
</option>

<option value="searchName">
    Notification Sender
</option>

<option value="searchType">
    Notification Type  
</option>

<option value="searchDate">
    Notification Date  
</option>
</select>
<div class="search-inputs">
  <input class="searchName" type="text"></input>
  <input class="searchType" type="checkbox"></input>
  <input class="searchDate" type="text"></input>
</div>

请确保您重构了类名和值，因为我很快就这样做了。

Answer 3

在select的onchange事件中使用

动态创建元素

 var dynElem = document.createElement('input');
        dynElem.type = 'text';
        dynElem.value = 'welcome';

然后使用Javascript或Jquery将dynElem附加到Div，如javascript中的appendChild（dynElem）或jquery中的附加（dynElem）

Answer 4

请您可以将此代码段用于代码块或先测试然后再使用它。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .searchName, .searchType, .searchDate{
            display:none;
        }
    </style>
    <script src="jquery-1.7.1.js"></script>
    <script type="text/javascript">
        function createElement123(val){
         $('.search-inputs').children().hide();
         $('.' + val).show();
        }
    </script>
</head>
<body>
    <select class="search-select" name="choicetosearch" onchange="createElement123(this.value)">
        <option value="None">---None---</option>
        <option value="searchName">Notification Sender</option>
        <option value="searchType">Notification Type</option>
        <option value="searchDate">Notification Date</option>
    </select>
    <div class="search-inputs">
        <input class="searchName" type="text" />
        <input class="searchType" type="checkbox" />
        <input class="searchDate" type="date" />
    </div>

</body>
</html>

希望它有助于解决您的问题。 @Cheers

下拉列表选择创建动态输入类型

4 个答案: