作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我的网络应用程序的 html 片段。我试图根据 .commtype 的选择来更改 .commmethod 的选定值,但所有常用技术对我都不起作用。
html 片段下面是我的 jquery。
<div class="form-group">
<div class="col-sm-4">
<select style="display: none;" class="combobox form-control chzn-done" id="commtype" name="CommunicationTypeId">
<option value="-1">Select one...</option>
<option value="401">Phone</option>
<option value="403">Fax</option>
<option value="404">Email</option>
<option value="402">Postal</option>
</select>
<div style="width: 513px;" class="chzn-container chzn-container-single" id="commtype_chzn">
<a href="javascript:void(0)" class="chzn-single" tabindex="-1">
<span>Select one...</span>
</a>
<div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;">
<ul class="chzn-results">
<li id="commtype_chzn_o_0" class="active-result result-selected" style="">Select one...</li>
<li id="commtype_chzn_o_1" class="active-result" style="">Phone</li>
<li id="commtype_chzn_o_2" class="active-result" style="">Fax</li>
<li id="commtype_chzn_o_3" class="active-result" style="">Email</li>
<li id="commtype_chzn_o_4" class="active-result" style="">Postal</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<select style="display: none;" class="combobox form-control chzn-done" id="commmethod" name="CommunicationMethodId">
<option value="-1">Select one...</option>
<option value="2">Slow</option>
<option value="5">Fast</option>
<option value="4">Fasted</option>
<option value="1">Slowest</option>
<option value="3">Slower</option>
</select>
<div style="width: 513px;" class="chzn-container chzn-container-single" id="commmethod_chzn">
<a href="javascript:void(0)" class="chzn-single" tabindex="-1">
<span>Select one...</span>
</a>
<div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;">
<ul class="chzn-results">
<li id="commmethod_chzn_o_0" class="active-result result-selected" style="">Select one...</li>
<li id="commmethod_chzn_o_1" class="active-result" style="">Slow</li>
<li id="commmethod_chzn_o_2" class="active-result" style="">Fast</li>
<li id="commmethod_chzn_o_3" class="active-result" style="">Fasted</li>
<li id="commmethod_chzn_o_4" class="active-result" style="">Slowest</li>
<li id="commmethod_chzn_o_5" class="active-result" style="">Slower</li>
</ul>
</div>
</div>
Jquery 代码确实设置了 Commmethod 的选定值,但是,它不会更改在表单提交验证期间处理条目所需的其他值。 (参见 jquery 之后的代码片段)
<script type="text/javascript">
$("#commtype").change(function () {
//I do get the correct selected value here
var theselected = $('#commtype >option:selected').text();
switch (theselected) {
case "Phone":
$("#commmethod").val(2);
break;
case "Fax":
$("#commmethod").val(5);
break;
case "Email":
$('#commmethod').val(4);
break;
case "Postal":
$('#commmethod').val(1);
break;
default:
$('#commmethod').val(1);
break;
}
$("#commmethod").trigger("liszt:updated");
});
</script>
因此,如果我在开关后输出#commmethod.val,我会得到我想要的值,但上面 html 中的以下元素(用 ---> 标记)不会根据需要更新...
<div style="width: 513px;" class="chzn-container chzn-container-single" id="commmethod_chzn">
<a href="javascript:void(0)" class="chzn-single" tabindex="-1">
---> <span>Select one...</span>
</a>
<div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;">
<ul class="chzn-results">
<li id="commmethod_chzn_o_0" class="active-result result-selected" style="">Select one...</li>
---> <li id="commmethod_chzn_o_1" class="active-result" style="">Slow</li>
<li id="commmethod_chzn_o_2" class="active-result" style="">Fast</li>
<li id="commmethod_chzn_o_3" class="active-result" style="">Fasted</li>
<li id="commmethod_chzn_o_4" class="active-result" style="">Slowest</li>
<li id="commmethod_chzn_o_5" class="active-result" style="">Slower</li>
</ul>
</div>
</div>
如果我使用下拉菜单对 Commmethod 进行选择,则上面的内容将更新为该值,并且所选 Commmethod 列表项的类将附加结果选择。
*****更新*****事实证明,jquery 选择的插件正在对事件进行更新。研究 stackoverflow 以正确更新下拉列表,尚未找到解决方案。
我感谢任何和所有的帮助。谢谢。
最佳答案
我认为您正在寻找类似以下内容的内容。
$("#commtype").change(function () {
var theselected = $('option:selected', this).text();
switch (theselected) {
case "Phone":
$("#commmethod").val(2);
case "Fax":
$("#commmethod").val(5);
case "Email":
$("#commmethod").val(4);
case "Postal":
$("#commmethod").val(1);
default:
$("#commmethod").val(-1);
}
$("#commmethod").trigger("liszt:updated"); //to update chosen select
});
关于javascript - 无法更改使用所选插件的 html 中的下拉选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38664299/
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止,我在 Swift 中有这个: import Foundation import Cocoa e
我是一名优秀的程序员,十分优秀!