我有2个jquery ui选择菜单。两者最初都被禁用。基本上其中一个是文本框，它有一个来自服务器的预填充值。当用户点击“编辑”时符号，该文本框转换为jquery ui选择并基于该值启用另一个选择菜单。但是，该选择菜单没有打开下拉列表，只是在那里显示该值。当我尝试打开该下拉菜单时，我在浏览器中收到此错误： - 未捕获的TypeError：无法读取属性＆＃39; index＆＃39;未定义的 它指向jquery-ui.min.js并在jquery ui js代码的这一部分抛出红线（只是它的一部分）： -
t.focusIndex=s.index,t.button.attr("aria-activedescendant",t.menuItems.eq(s.index).attr("id"))}}).menu("instance"),this.menu.addClass("ui-corner-bottom").removeClass("ui-corner-all"),this.menuInstance._off(this.menu,"mouseleave"),this.menuInstance._closeOnDocumentClick
不幸的是，当我尝试在小提琴中运行它时，代码运行正常。
这是我的JS： -
var tab_id=0;
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible.");
});
},
activate: function (event, ui) {
tab_id=ui.newTab.index();
return true;
}
});
});
// UI elements initialized state; requires the user to take action to enable editing
$("#ipVersion_0").selectmenu({
width:250,
disabled:true
});
$("#ipVersion_1").selectmenu({
width:250,
disabled:true
});
/*initialize buttons*/
$("#editFields").button({
disabled:false
});
/*disabling cancel and apply buttons by default*/
$("#cancelButton").button({
disabled:true
});
$("#applyButton").button({
disabled:true
});
// Enable the editing of IP configuration
$(document).on("click","#editFields",function(){
$("#editFields").button("option","disabled",true);
$("#applyButton").button("option","disabled",false);
$("#cancelButton").button("option","disabled",false);
if(tab_id === 0) {
/*For 1st tab*/
var connMode = $("#cfgMethod_0").val();
if (connMode === 'DHCP') {
$("#cfgMethod_0").replaceWith("<select class='ipv4editable' id='cfgMethod_0' name='cfgMethod_0'> <option selected>DHCP</option> <option>static</option></select>");
$("#cfgMethod_0").selectmenu({
width: 250,
disabled: false
});
} else {
$("#cfgMethod_0").replaceWith("<select class='ipv4editable' id='cfgMethod_0' name='cfgMethod_0'> <option>DHCP</option> <option selected>static</option></select>");
$("#cfgMethod_0").selectmenu({
width: 250,
disabled: false
});
}
} else {
/*For 2nd tab*/
var connMode = $("#cfgMethod_1").val();
if (connMode === 'DHCP') {
$("#cfgMethod_1").replaceWith("<select class='ipv4editable' id='cfgMethod_1' name='cfgMethod_1'> <option selected>DHCP</option> <option>static</option></select>");
$("#cfgMethod_1").selectmenu({
width: 250,
disabled: false
});
} else {
$("#cfgMethod_1").replaceWith("<select class='ipv4editable' id='cfgMethod_1' name='cfgMethod_1'> <option>DHCP</option> <option selected>static</option></select>");
$("#cfgMethod_1").selectmenu({
width: 250,
disabled: false
});
}
}
});
$(document).on("click","#cancelButton",function(){
$("input[type=text]").prop("disabled",true).css("border-color","");
$("#editFields").button("enable");
$("#applyButton").button("disable");
$("#cancelButton").button("disable");
if(tab_id === 0){
$("#cfgMethod_0").replaceWith("<input type='text' id='cfgMethod_0' name='cfgMethod_0' class='ipv4editable' disabled>");
$("#ipVersion_0").selectmenu("option","disabled",true);
}
else{
$("#cfgMethod_1").replaceWith("<input type='text' id='cfgMethod_1' name='cfgMethod_1' class='ipv4editable' disabled>");
$("#ipVersion_1").selectmenu("option","disabled",true);
}
});
$(document).on("click","#applyButton",function(){
$("input[type=text]").prop("disabled",true).css("border-color","");
$("#editFields").button("enable");
$("#applyButton").button("disable");
$("#cancelButton").button("disable");
if(tab_id === 0){
$("#cfgMethod_0").replaceWith("<input type='text' name='cfgMethod_0' class='ipv4editable' id='cfgMethod_0' disabled>");
$("#ipVersion_0").selectmenu("option","disabled",true);
}else{
$("#cfgMethod_1").replaceWith("<input type='text' name='cfgMethod_1' class='ipv4editable' id='cfgMethod_1' disabled>");
$("#ipVersion_1").selectmenu("option","disabled",true);
}
});
$(document).on("selectmenuchange","#cfgMethod_0",function(){
if($("#cfgMethod_0 :selected").text() === "static") {
$("#ipVersion_0").selectmenu("option","disabled",false);
$('.ipv4editable').css("border-color","red");
$('.ipv4editable').prop("disabled",false);
}
else{
$("#ipVersion_0").selectmenu("option","disabled",true);
/*disable ipv4 section */
$('.ipv4editable').css("border-color","");
$('.ipv4editable').prop("disabled",true);
$('.ipv6editable').css("border-color","");
$('.ipv6editable').prop("disabled",true);
}
}).trigger('selectmenuchange');
$(document).on("selectmenuchange","#cfgMethod_1",function(){
if($("#cfgMethod_1 :selected").text() === "static") {
$("#ipVersion_1").selectmenu("option","disabled",false);
$('.ipv4editable').css("border-color","red");
$('.ipv4editable').prop("disabled",false);
}
else{
$("#ipVersion_1").selectmenu("option","disabled",true);
/*disable ipv4 section */
$('.ipv4editable').css("border-color","");
$('.ipv4editable').prop("disabled",true);
$('.ipv6editable').css("border-color","");
$('.ipv6editable').prop("disabled",true);
}
}).trigger('selectmenuchange');
$(document).on("selectmenuchange","#ipVersion_0",function(){
if($("#ipVersion_0 :selected").text() === "IPv4") {
$('.ipv4editable').css("border-color","red");
$('.ipv4editable').prop("disabled",false);
/*disable ipv6 section */
$('.ipv6editable').css("border-color","");
$('.ipv6editable').prop("disabled",true);
}
else{
$('.ipv6editable').css("border-color","red");
$('.ipv6editable').prop("disabled",false);
/*disable ipv4 section */
$('.ipv4editable').css("border-color","");
$('.ipv4editable').prop("disabled",true);
}
}).trigger('selectmenuchange');
$(document).on("selectmenuchange","#ipVersion_1",function(){
if($("#ipVersion_1 :selected").text() === "IPv4") {
$('.ipv4editable').css("border-color","red");
$('.ipv4editable').prop("disabled",false);
/*disable ipv6 section */
$('.ipv6editable').css("border-color","");
$('.ipv6editable').prop("disabled",true);
}
else{
$('.ipv6editable').css("border-color","red");
$('.ipv6editable').prop("disabled",false);
/*disable ipv4 section */
$('.ipv4editable').css("border-color","");
$('.ipv4editable').prop("disabled",true);
}
}).trigger('selectmenuchange');
这是相关的html片段： -
<form id="ethernetForm" method="post" action="">
<div id="protocolParIcons">
<a href="#!" class="sbtooltip" title="Apply"><button id="applyButton" class="ui-icon ui-icon-circle-check"></button></a>
<a href="#!" class="sbtooltip" title="Cancel"><button id="cancelButton" class="ui-icon ui-icon-cancel"></button></a>
<a href="#!" class="sbtooltip" title="Edit"><button id="editFields" class="ui-icon ui-icon-pencil"></button></a>
</div>
<div id="protocolParMain" align="center">
<div id="tabs">
<ul>
<li><a href="#ethernetPortTab1" id="0">Ethernet Port 0</a></li>
<li><a href="#ethernetPortTab2" id="1">Ethernet Port 1</a></li>
</ul>
<div id="ethernetPortTab1">
<table style="width:100%">
<tr>
<td valign="top">
<label for="cfgMethod_0">Configuration Method</label>
<input type="text" class="ipv4editable" name="cfgMethod_0" id="cfgMethod_0" disabled>
</td>
<td valign="top">
<label for="ipVersion_0">IP Version</label>
<select name="ipVersion_0" id="ipVersion_0">
<option>IPv4</option>
<option>IPv6</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<label for="ipv4Address_0">IPv4 Address</label>
<input class="ipv4editable" type="text" name="ipv4Address" id="ipv4Address_0" disabled>
</td>
<td valign="top">
<label for="ipv6Address_0">IPv6 Address/Mask</label>
<input class="ipv6editable" type="text" name="ipv6Address" id="ipv6Address_0" disabled>
</td>
</tr>
<tr>
<td valign="top">
<label for="ipv4Mask_0">Subnet Mask v4</label>
<input class="ipv4editable" type="text" name="ipv4Mask" id="ipv4Mask_0" disabled>
</td>
<td valign="top">
<!--
<label for="ipv6Mask_0">Subnet Mask v6</label>
<input class="ipv6editable" type="text" name="ipv6Mask" id="ipv6Mask_0" disabled>
-->
</td>
</tr>
<tr>
<td valign="top">
<label for="ipv4Gateway_0">Gateway v4</label>
<input class="ipv4editable" type="text" name="ipv4Gateway" id="ipv4Gateway_0" disabled>
</td>
<td valign="top">
<label for="ipv6Gateway_0">Gateway v6</label>
<input class="ipv6editable" type="text" name="ipv6Gateway" id="ipv6Gateway_0" disabled>
</td>
</tr>
</table>
</form>