Javascript Jquery选择器获取所有下拉列表值,2个下拉列表的问题
HTML表格 第1行:第1列[国家/地区下拉列表];第2列[国家/地区下拉列表] 第2行:第1列[国家/地区下拉列表];第2列[国家/地区下拉列表] 表中有2个下拉列表,用于国家和州-这在一个下拉列表上有效,但它也禁用了其他/州下拉列表 问题是,虽然USA和Aust都有不同的州选择文本,但在col2中,如果我选择California,Perth也会被禁用,并以相同的州ID/值3结束!,因此,我的代码将它们作为重复项禁用,因为它比较的是选定的值而不是文本,例如,此选择将禁用珀斯Javascript Jquery选择器获取所有下拉列表值,2个下拉列表的问题,javascript,jquery,html,drop-down-menu,dropdown,Javascript,Jquery,Html,Drop Down Menu,Dropdown,HTML表格 第1行:第1列[国家/地区下拉列表];第2列[国家/地区下拉列表] 第2行:第1列[国家/地区下拉列表];第2列[国家/地区下拉列表] 表中有2个下拉列表,用于国家和州-这在一个下拉列表上有效,但它也禁用了其他/州下拉列表 问题是,虽然USA和Aust都有不同的州选择文本,但在col2中,如果我选择California,Perth也会被禁用,并以相同的州ID/值3结束!,因此,我的代码将它们作为重复项禁用,因为它比较的是选定的值而不是文本,例如,此选择将禁用珀斯 [USA]
[USA] -> [California] (value = 3)
[Australia] -> [Perth] (*also* has value= 3) so its disabled
如何做到这一点,作为国家和州在每一行的独特组合?或者只是比较下拉列表的文本
i、 e.选项1,如何检查国家ID+州ID值是否已经存在?
选项2,只需比较所选文本就可以了
otherDropdowns.find'option[value='+selectedValue+']'。prop'disabled',true;
};
***图像显示类似的东西。。。不准确
这不是一个可以复制/粘贴的完美解决方案,但它已经非常接近您想要的了 我将其作为一个具有4个参数的整体函数: 真正的表,最好是id td,最好是一个班级 要克隆的隐藏表,最好是id “新建行”按钮,最好是id 让您可以自由地在HTML中命名您想要的东西,而不必考虑修复脚本中使用这4个名称的多个位置 现在。。。这只是一个好的开始。 事实上,当用户从国家A更改为国家B时,状态下拉列表应该不同 这是我留下的唯一问题。。。因为我不知道你想如何加载这些选项 我花了很多时间才辞职。。。我这么做是因为我不相信这么简单的请求会这么复杂。。。我不得不压碎它 ;. 这里是代码JS和一个工作演示
我想我在做什么。。。但在走得太远之前:我需要知道什么是动态创建的。到目前为止,我假设第一列国家不是动态的。。。我忘记了第二栏的动态选项。哈哈,但我无论如何都有办法。我明天再查。这是个好主意@LouySpatriceBesette我无法在两种情况下设置禁用状态-1当新行被动态克隆/追加时-当这些行被追加到表中时。另外,在第一次运行时,我无法在当前的“$this dropdown”州或国家设置禁用。我想知道在页面上进行组合是否更容易,并防止出现与您用斜体写的相同的组合值:这正是我的目的…感谢您尝试一下。是的,我知道,是的,这样一个简单的问题也困扰着我:我也有同样的问题出现在我附上的照片中。。我已经超过你了,很接近。。。但我仍然需要解决方案。。。不知道该怎么办!我懂了。。。你展示的正是我留下的bug。这是因为禁用有两种方式1-从国家/地区选择,检查是否已为同一国家/地区选择。2-从状态选择,禁用其他选择和相同国家/地区的选定选项。现在,当您更改国家时,它不会重置选择。。。因为它应该动态地更改这些选项元素。这就是我停下来的地方。这是一个很好的链接。。。
// Javascript Does not disable States previously selected
$("#CountryTable").on('change', '.State', function() {
var dropDownText = $('#CountryTable .State select').not(this).map(function() {
return this.SelectedText; // does not work this.val() works but useless
}).get();
var selectedValue = $(this).val();
var otherDropdowns = $('.State').not(this);
<table id="CountryTable">
<tbody id="CountryTableBody">
<tr class="row">
<td>
<select>
<option value="1">Country A</option>
<option value="2">Country B</option>
<option value="3">Country C</option>
</select>
</td>
<td>
<select>
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
</select>
</td>
<tr> <!-- in JS prevent previous selection -->
<tr class="row">
<td>
<select>
<option value="1">Country A</option>
<option value="2">Country B</option>
<option value="3">Country C</option>
</select>
</td>
<td>
<select>
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
</select>
</td>
<tr>
</tbody>
var excusiveSelect = function(tableID,rowCLASS,dummyID,cloneBtn){ // Preferably ID, CLASS, ID, ID
console.clear();
// Cloning function
var cloneRow = function(){
var newrow = $(dummyID).find(rowCLASS).clone();
$(tableID).append(newrow);
refresh_mapping();
};
// Generate new lines
$(cloneBtn).on("click",cloneRow);
// ================================================================================ INITIALISATION
// Selection mapping
var row_count;
var row_map = {};
// Get select clas names per colums
var col_count = $(rowCLASS).first().find("td").length;
var col_classes = [];
for(i=0;i<col_count;i++){
col_classes[i] = $(document).find(rowCLASS).first().find("select").eq(i).attr("class").split(" ").join(".");
}
console.log("SELECT CLASSES: "+JSON.stringify(col_classes));
var refresh_mapping = function(){
row_count = $(document).find(rowCLASS).length-1;
console.log("ROWCOUNT: "+row_count);
for(i=0;i<row_count;i++){
row_map["row_"+i] = {};
$(tableID).find(rowCLASS).eq(i).find("select").each(function(index){
// Get the select classes as object attribute.
var thisClasses = $(this).attr("class").split(" ").join(".");
// For each row/select get the selected index.
row_map["row_"+i][thisClasses] = $(this)[0].selectedIndex;
});
}
console.log("VALUES MAPPING: "+JSON.stringify(row_map));
}
cloneRow();
// ================================================================================ FROM COLUMN #1
$(document).on("change","."+col_classes[0],function(){
console.log("\n======================================================= Country change\n");
refresh_mapping();
// Disables options already selected in ALL col_classes[1] where col_classes[0] is the same
for(i=0;i<row_count;i++){
if( ( row_map["row_"+i][col_classes[0]] == $(this)[0].selectedIndex )
&& ( $(this).closest(rowCLASS).index() != i ) ){
$(this).closest(rowCLASS).find("."+col_classes[1]+" option").eq( row_map["row_"+i][col_classes[1]] ).attr("disabled",true);
// Else enable the option if not self
}else{
if( $(this).closest(rowCLASS).index() != i ){
$(this).closest(rowCLASS).find("."+col_classes[1]+" option").eq(i).attr("disabled",false);
}
}
}
});
// ================================================================================ FROM COLUMN #2
$(document).on("change","."+col_classes[1],function(){
console.log("\n======================================================= State change\n");
console.clear();
refresh_mapping();
thisIndex = $(this)[0].selectedIndex; // Option selectedIndex
thisRowIndex = $(this).closest(rowCLASS).index(); // Row index
// If same country...
var thisCol0index = $(this).closest(rowCLASS).find("."+col_classes[0])[0].selectedIndex;
$(tableID).find("."+col_classes[1]).each(function(){
if( $(this).closest(rowCLASS).find("."+col_classes[0])[0].selectedIndex == thisCol0index ){
// Zap tout les disabled
$(this).find("option:not(:eq(0))").attr("disabled",false);
// Use mapping to disable based on col_classes[0]
for(i=0;i<row_count;i++){
if( row_map["row_"+i][col_classes[0]] == thisCol0index ){
$(this).find("option").eq(row_map["row_"+i][col_classes[1]]).attr("disabled",true);
}
}
}
});
});
// ================================================================================
}
// Init!
excusiveSelect("#CountryTable",".row","#DummyTable","#newRow"); // Preferably ID, CLASS, ID, ID