如何解决在 JavaScript 中选择匹配的动态字段
我试图在表单中选择一个单选选项,然后动态选择匹配的下拉选项。 即,如何在单选选项中选择“工作”,并在下拉列表中动态自动选择“工作”?我正在努力弄清楚如何让这段代码工作。最后,我还想在每个选项被选中时更改它的颜色。
请在此处查看小提琴链接:https://jsfiddle.net/rs26nfk1/
<div class="container"> <p>
<div contenteditable="true" id="myContent">
<form method="POST" action="..." onsubmit="return checkForm(this);">
<label for="new-task">Add</label><input id="new-task" type="text" placeholder="Task Name..."><br>
<label for="task-descr"></label><input id="task-descr" type="text" placeholder="Task Description..."><br>
<label>Date: <input type="text" size="12" placeholder="dd/mm/yyyy" name="startdate" id="startdate">
<!--<small>(dd/mm/yyyy)</small>-->
</label><br>
<input id="urgent" type="checkBox"><label for="urgent">Urgent</label><br>
<input type="radio" id="groceries" name="category" value="groceries">
<label for="groceries">Groceries</label>
<input type="radio" id="work" name="category" value="work">
<label for="work">Work</label>
<input type="radio" id="chores" name="category" value="other">
<label for="chores">Chores</label>
<input type="radio" id="finance" name="category" value="other">
<label for="finance">Finance</label>
<form>
<br>
Select your category:
<select id="mySelect">
<option>Groceries</option>
<option>Work</option>
<option>Chores</option>
<option>Finance</option>
</select>
<br><br>
<input type="button" onclick="getoption()" value="Click Me!">
</form>
<p id="demo"></p>
</form>
<!--Task Order-->
<button input type="button" onclick="getoption()" value="Click Me!">Add</button>
</form>
</p>
<h3>To Do</h3>
<ul id="incomplete-tasks">
</ul>
<h3>Completed</h3>
<ul id="completed-tasks">
</ul></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(document).on('change','select[name="item_Meta[work]"]',function () {
var lookup_val = $(this).val();
$("select[name='item_Meta[mySelect]'] option").filter(function () {
return $(this).text() === lookup_val;
}).first().prop('selected',true).siblings().prop('selected',false);
$("select[name='item_Meta[mySelect]']").trigger({ type:'change',originalEvent:'custom' });
});
});
</script>
解决方法
您可以获取已检查的无线电值,然后使用具有该值的值 find 选项并将 prop('selected',true);
添加到该选项。
演示代码:
//onchange of input rado
$(document).on('change','input[name=category]',function() {
var lookup_val = $(this).val(); //get val
//add slected
$("select#mySelect").find("option:contains(" + lookup_val + ")").prop('selected',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="..." onsubmit="return checkForm(this);">
<label for="new-task">Add</label><input id="new-task" type="text" placeholder="Task Name..."><br>
<label for="task-descr"></label><input id="task-descr" type="text" placeholder="Task Description..."><br>
<label>Date: <input type="text" size="12" placeholder="dd/mm/yyyy" name="startdate" id="startdate">
<!--<small>(dd/mm/yyyy)</small>-->
</label><br>
<input id="urgent" type="checkbox"><label for="urgent">Urgent</label><br>
<input type="radio" id="groceries" name="category" value="Groceries">
<label for="groceries">Groceries</label>
<input type="radio" id="work" name="category" value="Work">
<label for="work">Work</label>
<input type="radio" id="chores" name="category" value="Chores">
<label for="chores">Chores</label>
<input type="radio" id="finance" name="category" value="Finance">
<label for="finance">Finance</label>
<form>
<br> Select your category:
<select id="mySelect">
<option>Groceries</option>
<option>Work</option>
<option>Chores</option>
<option>Finance</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Click Me!">
</form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。