javascript - 选择第一个下拉菜单并在第二个下拉菜单上显示相同的选定选项值
问题描述
我有两个选择下拉菜单。我在页面加载时显示第一个下拉列表,而第二个下拉列表是动态显示的。
现在我正在做的是,当用户从第一个下拉列表中选择任何内容时,单击锚标记后在第二个下拉列表中选择相同的选项。
我尝试了下面的代码,但存在一些问题。
$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"'if(fileStatus==1){"selected";}'> One</option><option value="2"' if(fileStatus==2){"selected";}'> Two</option><option value="3"'if(fileStatus==3){"selected";}'> Three</option></select>');
$(document).ready(function() {
$('.fileStatus').change(function() {
var fileStatus = $('.fileStatus option:selected').val();
})
var wrapper = $(".appentInside .row"); //Fields wrapper
var add_button = $(".click_me"); //Add button ID
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>');
});
});
<select name="pp_fileStatus[]" class="fileStatus">
<option disabled="" selected="">Select</option>
<option value="1"> One</option>
<option value="2"> Two</option>
<option value="3"> Three</option>
</select>
<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
<div class="row"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
解决方案
您可以通过添加 2 小行代码来做到这一点:
var fileStatus = $('.fileStatus:last option:selected').val(); // <-- This line
$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>');
$('.fileStatus:last').val(fileStatus); // <-- This line
var fileStatus = $('.fileStatus:last option:selected').val();
这将选择最后dropdown
一个存在的值。
$('.fileStatus:last').val(fileStatus);
这将dropdown
使用该值设置最后一个(又名新创建的)previous
。
演示
$(document).ready(function() {
$('.fileStatus:first').change(function() {
var fileStatus = $('.fileStatus option:selected').val();
$('.fileStatus:last').val(fileStatus);
})
var wrapper = $(".appentInside .row"); //Fields wrapper
var add_button = $(".click_me"); //Add button ID
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
var fileStatus = $('.fileStatus:last option:selected').val();
$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>');
$('.fileStatus:last').val(fileStatus);
});
});
<select name="pp_fileStatus[]" class="fileStatus">
<option disabled="" selected="">Select</option>
<option value="1"> One</option>
<option value="2"> Two</option>
<option value="3"> Three</option>
</select>
<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
<div class="row"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
推荐阅读
- ruby-on-rails - 双嵌套表单不向控制器发送属性
- plot - 通过分组动态移动绘图
- aws-lambda - 如何轮换 IAM 用户访问密钥
- shell - 在插入新行时列出 sed 更改的文件
- python - 如何在 2019 年用 OpenCV Python 倒带视频?
- swift - How to put a checkmark after search
- rest - 拒绝不支持的 API 客户端时的 HTTP 状态代码
- date - AttributeError:模块“QuantLib”没有属性“日期”
- vue.js - vue,svg onmove 拖动无法与 ViewBox 一起正常工作
- laravel - 如何在 Laravel 5 中将图像从数据库显示到刀片