javascript - 如何“添加更多”可以根据选择值显示表单输入字段的选择
问题描述
我有代码来显示将根据 Select 值显示的“表单输入字段”。
HTML:
<select class="form-control input-sm" name="filter_option" id="filter_option">
<option disabled="" selected="">Select a filter</option>
<option value="1">Position</option>
<option value="2">Salary</option>
<option value="3">Age</option>
<option value="4">gender</option>
<option value="5">nationality</option>
<option value="6">status</option>
</select>
<!-- POSITION -->
<div id="position_value">
<select class="form-control input-sm" style="margin-top:0px;" name="operator_position">
<option value="1">Position</option>
<option value="2">ไม่ใช่ตำแหน่ง (isn't)</option>
<option value="3">ตำแหน่งที่มี (contains)</option>
<option value="4">ตำแหน่งที่ไม่มี (isn't contains)</option>
</select>
<input class="form-control" id="inputdefault" type="text" placeholder="Position" name="filter_position">
</div>
<!-- SALARY -->
<div id="salary_value">
<select class="form-control input-sm" style="margin-top:0px" id="salary_oprator" name="operator_salary">
<option value="1">=</option>
<option value="2">มากกว่าเท่ากับ (>=)</option>
<option value="3">น้อยกว่าเท่ากับ (<=)</option>
<option value="4">มากกว่า (>)</option>
<option value="5">น้อยกว่า (<)</option>
<option value="6">ระหว่าง (Between)</option>
</select>
<input class="form-control" id="inputdefault" type="text" placeholder="Salary" name="filter_salary">
</div>
脚本 :
<script type="text/javascript">
$("[id='filter_option']").change(function()
{
if($(this).val() == "1"){
$("[id='position_value']").show();
} else {
$("[id='position_value']").hide();
}
if($(this).val() == "2"){
$("[id='salary_value']").show();
} else {
$("[id='salary_value']").hide();
}
});
$("[id='position_value']").hide();
$("[id='salary_value']").hide();
</script>
此代码,如果我选择位置,将显示有关位置的表单输入。我想添加“添加更多”按钮。当我点击这个按钮时,选择字段将附加在下面,每个选择字段将显示特定的表单输入,直到每个选择值。
我不知道编码这个,请指导我如何谢谢❤️
这是我的期望。当我按“+”时,它会在下面添加选择字段。 在此处输入图像描述
解决方案
这是粗略的,但它应该让您知道该怎么做。
我只是克隆了原始元素并将它们放在表单的底部。
$("#filter_option").change(function() {
let val = $("#filter_option").val(); //get the input from the select
if (val == 1) {
$("#container .position_value").each(function() { $(this).show()});
} else {
$("#container .position_value").each(function() { $(this).hide()});
}
if (val == 2) {
$("#container .salary_value").each(function(){ $(this).show()});
} //add more for other options
else {
$("#container .salary_value").each(function(){ $(this).hide()});
}
});
$("#add").click(function() { //when user clicks add
let elem;
let val = $("#filter_option").val(); //get the input from the select
if (val == 1) {
elem = $("#boxes .position_value").clone(); //create a clone of the element
} else if (val == 2) {
elem = $("#boxes .salary_value").clone();
} //add more for other options
else {
return;
}
$("#container").append(elem); //add the new element to the bottom
elem.show(); //show it
});
$(".position_value").hide();
$(".salary_value").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-sm" name="filter_option" id="filter_option">
<option disabled="" selected="">Select a filter</option>
<option value="1">Position</option>
<option value="2">Salary</option>
<option value="3">Age</option>
<option value="4">gender</option>
<option value="5">nationality</option>
<option value="6">status</option>
</select><button id="add">ADD</button>
<div id="container">
</div>
<div id="boxes">
<!-- POSITION -->
<div class="position_value">
<select class="form-control input-sm" style="margin-top:0px;" name="operator_position">
<option value="1">Position</option>
<option value="2">ไม่ใช่ตำแหน่ง (isn't)</option>
<option value="3">ตำแหน่งที่มี (contains)</option>
<option value="4">ตำแหน่งที่ไม่มี (isn't contains)</option>
</select>
<input class="form-control" id="inputdefault" type="text" placeholder="Position" name="filter_position">
</div>
<!-- SALARY -->
<div class="salary_value">
<select class="form-control input-sm" style="margin-top:0px" id="salary_oprator" name="operator_salary">
<option value="1">=</option>
<option value="2">มากกว่าเท่ากับ (>=)</option>
<option value="3">น้อยกว่าเท่ากับ (
<=) </option>
<option value="4">มากกว่า (>)</option>
<option value="5">น้อยกว่า (
<) </option>
<option value="6">ระหว่าง (Between)</option>
</select>
<input class="form-control" id="inputdefault" type="text" placeholder="Salary" name="filter_salary">
</div>
</div>
推荐阅读
- javascript - vue 中动态、可重用的模态
- android - 违反用户数据政策和开发者分发协议第 4.8 节
- python-2.7 - 根据一列值删除行
- java - 如何在单击按钮 Spring/Java/Thymeleaf 时添加新的输入字段
- json - 如何设置一个变量等于另一个变量excel vba中的json值
- python - 同时在垂直和水平方向连接 DataFrame
- android - 使用 ItemTouchHelper.Callback 在 RecyclerView 中创建向左滑动菜单
- c# - Selenium Web Driver V.3.14 中的 DesiredCapabilities 已过时 如何在 C# 中编写 Selenium 网格的代码?
- cmake - CMake 中重要的非符号宏定义
- r - R中跨数据帧的条件求和