多个下拉菜单在 Jquery 中不起作用
Multiple drop down not working in Jquery
我尝试创建一个多下拉列表,这里是HTML,JS代码
<div class="meaaow">
<select style="margin-top:10px;width: 90%;margin-left:5px;" name="3223|887" id="3223" class="pp ProjectType_1" required="" pattern="[^a-zA-Z0-9]">
<option value="0" selected="">Requirements</option>
<option value="Services">Services</option>
<option value="Products" selected="">Products</option>
</select>
<select style="margin-bottom:10px;width: 90%;margin-left:5px;" name="3224|888" id="3224" class="qq SubProjectType_1" required="" pattern="[^a-zA-Z0-9]">
<option value="">Select Category</option>
</select>
<select style="margin-bottom:10px;width: 90%;margin-left:5px;" name="3387|947" id="3387" class="SubsubProjectType_1" required="" pattern="[^a-zA-Z0-9]">
<option value="0">Select Sub Category</option>
</select>
</div>
JS
link
上的完整 Js
所以我想做的是
$('.pp').change(function () {
var classNamex = $(this).attr('class');
var pTypeBufr = classNamex.split(' ');
var ptype = pTypeBufr[1].split('_');
var OptIndex = $('option:selected', $(this)).index();
var optionx = "<option value=''>Select Category</option>";
//alert(OptIndex);
if(OptIndex !=4)
{
var SubProject_arr = s_a[OptIndex].split("|");
for (var i = 0; i < SubProject_arr.length; i++) {
optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
}
}
if(OptIndex ==1)
$('.SubProjectType_'+ptype[1]).removeClass('qq').addClass('uu').html(optionx);
if(OptIndex ==2)
$('.SubProjectType_'+ptype[1]).removeClass('uu').addClass('qq').html(optionx);
});
并且对于两个不同的 classes 我有两个这样的函数
$('.qq').change(function () {
var classNamex = $(this).attr('class');
var pTypeBufr = classNamex.split(' ');
var ptype = pTypeBufr[1].split('_');
var OptIndex = $('option:selected', $(this)).index();
var optionx = "<option value=''>Select Sub Category</option>";
alert('sssss');
if(OptIndex ==2)
{
var SubProject_arr = t_a[OptIndex].split("|");
for (var i = 0; i < SubProject_arr.length; i++) {
optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
}
}
// alert('.SubProjectType_'+ptype[1]);
$('.SubsubProjectType_'+ptype[1]).html(optionx);
});
和 class.uu
$('.uu').change(function () {
var classNamex = $(this).attr('class');
var pTypeBufr = classNamex.split(' ');
var ptype = pTypeBufr[1].split('_');
var OptIndex = $('option:selected', $(this)).index();
var optionx = "<option value=''>Select Sub Category</option>";
alert('im inside uu');
var SubProject_arr = u_a[OptIndex].split("|");
for (var i = 0; i < SubProject_arr.length; i++) {
optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
}
// alert('.SubProjectType_'+ptype[1]);
$('.SubsubProjectType_'+ptype[1]).html(optionx);
});
所以基本上我正在更新第二个下拉菜单的 class 名称,但是每次我使用第二个下拉菜单时总是与 .qq
class 相关的功能只触发
请帮帮我
我在原来的 HTML 中找不到 class uu
,而且我看到你动态切换 class uu
和 qq
.
对动态内容上的事件使用事件委托:
$(document).on('change', '.pp', function () { .....
$(document).on('change', '.qq', function () { .....
$(document).on('change', '.uu', function () { .....
我尝试创建一个多下拉列表,这里是HTML,JS代码
<div class="meaaow">
<select style="margin-top:10px;width: 90%;margin-left:5px;" name="3223|887" id="3223" class="pp ProjectType_1" required="" pattern="[^a-zA-Z0-9]">
<option value="0" selected="">Requirements</option>
<option value="Services">Services</option>
<option value="Products" selected="">Products</option>
</select>
<select style="margin-bottom:10px;width: 90%;margin-left:5px;" name="3224|888" id="3224" class="qq SubProjectType_1" required="" pattern="[^a-zA-Z0-9]">
<option value="">Select Category</option>
</select>
<select style="margin-bottom:10px;width: 90%;margin-left:5px;" name="3387|947" id="3387" class="SubsubProjectType_1" required="" pattern="[^a-zA-Z0-9]">
<option value="0">Select Sub Category</option>
</select>
</div>
JS
link
上的完整 Js所以我想做的是
$('.pp').change(function () {
var classNamex = $(this).attr('class');
var pTypeBufr = classNamex.split(' ');
var ptype = pTypeBufr[1].split('_');
var OptIndex = $('option:selected', $(this)).index();
var optionx = "<option value=''>Select Category</option>";
//alert(OptIndex);
if(OptIndex !=4)
{
var SubProject_arr = s_a[OptIndex].split("|");
for (var i = 0; i < SubProject_arr.length; i++) {
optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
}
}
if(OptIndex ==1)
$('.SubProjectType_'+ptype[1]).removeClass('qq').addClass('uu').html(optionx);
if(OptIndex ==2)
$('.SubProjectType_'+ptype[1]).removeClass('uu').addClass('qq').html(optionx);
});
并且对于两个不同的 classes 我有两个这样的函数
$('.qq').change(function () {
var classNamex = $(this).attr('class');
var pTypeBufr = classNamex.split(' ');
var ptype = pTypeBufr[1].split('_');
var OptIndex = $('option:selected', $(this)).index();
var optionx = "<option value=''>Select Sub Category</option>";
alert('sssss');
if(OptIndex ==2)
{
var SubProject_arr = t_a[OptIndex].split("|");
for (var i = 0; i < SubProject_arr.length; i++) {
optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
}
}
// alert('.SubProjectType_'+ptype[1]);
$('.SubsubProjectType_'+ptype[1]).html(optionx);
});
和 class.uu
$('.uu').change(function () {
var classNamex = $(this).attr('class');
var pTypeBufr = classNamex.split(' ');
var ptype = pTypeBufr[1].split('_');
var OptIndex = $('option:selected', $(this)).index();
var optionx = "<option value=''>Select Sub Category</option>";
alert('im inside uu');
var SubProject_arr = u_a[OptIndex].split("|");
for (var i = 0; i < SubProject_arr.length; i++) {
optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
}
// alert('.SubProjectType_'+ptype[1]);
$('.SubsubProjectType_'+ptype[1]).html(optionx);
});
所以基本上我正在更新第二个下拉菜单的 class 名称,但是每次我使用第二个下拉菜单时总是与 .qq
class 相关的功能只触发
请帮帮我
我在原来的 HTML 中找不到 class uu
,而且我看到你动态切换 class uu
和 qq
.
对动态内容上的事件使用事件委托:
$(document).on('change', '.pp', function () { .....
$(document).on('change', '.qq', function () { .....
$(document).on('change', '.uu', function () { .....