无法更改 html 中使用所选插件的下拉选择
Cannot change dropdown selection in html that is using chosen plugin
这是我的网络应用 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 列表项的 class 会附加 result-selected。
*****更新*****
原来 jquery 选择的插件正在对事件进行更新。正在研究 Whosebug 以正确更新下拉列表,尚未找到解决方案。
感谢所有帮助。谢谢。
这样做
<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":
$("#commdetail").val(2);
case "Fax":
$("#commdetail")val(1);
case "Email":
$('#commdetail').val(5);
case "Postal":
$('#commdetail').val(4);
default:
}
});
</script>
我想你正在寻找类似下面的内容。
$("#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
});
尝试使用 Developer 工具获取值。
$('#commmethod').val();
应该return 预期值,但该值在页面上显示不正确。如果控件未正确刷新,通常会出现这种情况。
设置值后,也尝试添加此值
$("#commmethod").val('whatever').trigger("liszt:updated");
$("#commmethodSimple").val('whatever').trigger('change');
$.uniform.update();
在所有建议(谢谢大家)和进一步的 Whosebug 研究之后,我找到了解决我的特定问题的方法。
虽然下面的代码片段没有更新下拉菜单的 select 选项,但它不需要。它会更新选定的值,然后在提交表单时对其进行验证和保存。
新jquery...
$("#commtype").change(function () {
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').chosen().change();
$("#commmethod").trigger("liszt:updated");
});
这是我的网络应用 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 列表项的 class 会附加 result-selected。
*****更新***** 原来 jquery 选择的插件正在对事件进行更新。正在研究 Whosebug 以正确更新下拉列表,尚未找到解决方案。
感谢所有帮助。谢谢。
这样做
<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":
$("#commdetail").val(2);
case "Fax":
$("#commdetail")val(1);
case "Email":
$('#commdetail').val(5);
case "Postal":
$('#commdetail').val(4);
default:
}
});
</script>
我想你正在寻找类似下面的内容。
$("#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
});
尝试使用 Developer 工具获取值。
$('#commmethod').val();
应该return 预期值,但该值在页面上显示不正确。如果控件未正确刷新,通常会出现这种情况。
设置值后,也尝试添加此值
$("#commmethod").val('whatever').trigger("liszt:updated");
$("#commmethodSimple").val('whatever').trigger('change');
$.uniform.update();
在所有建议(谢谢大家)和进一步的 Whosebug 研究之后,我找到了解决我的特定问题的方法。
虽然下面的代码片段没有更新下拉菜单的 select 选项,但它不需要。它会更新选定的值,然后在提交表单时对其进行验证和保存。
新jquery...
$("#commtype").change(function () {
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').chosen().change();
$("#commmethod").trigger("liszt:updated");
});