用于获取所有下拉值的 Jquery 选择器，2 个下拉列表的问题 [英] Jquery selector to get all dropdown values, issues for 2 dropdowns

查看：20
本文介绍了用于获取所有下拉值的 Jquery 选择器，2 个下拉列表的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

HTML 表格

<块引用>

Row#1 : Col 1 [Country DropDown] |Col #2 [StateDropDown]

Row#2 : Col 1 [Country DropDown] |Col 2 [StateDropDown]

table 有 2 个 dropdownlists，用于 Country &State - 这适用于一个下拉列表，但它也禁用其他/状态下拉列表！

问题是，虽然 USA 和 Aust 都有 diff states selected 文本，但在 col2 中以 same 结尾> selected State ID/value 3(如果我选择加利福尼亚，珀斯也被禁用！，因此我的代码将它们禁用为重复项，因为它比较了选定的值而不是文本) 例如此选择禁用珀斯..

[美国] ->[加利福尼亚](值 = 3)[澳大利亚]->[珀斯](*也* 有值= 3)所以它被禁用

如何作为国家和地区的独特组合做到这一点状态在每一行?还是只是比较下拉菜单的文本?...

  1. 即Option1、如何检查Country ID + State ID Value是否已经存在?
  2. Option2，只比较选中的文本(感觉半成品)

<小时>

解决方案

这不是一个完美的解决方案，您只需复制/粘贴即可，但它已经非常接近您想要的效果.

我把它作为一个带有 4 个参数的完整函数:

  1. 真正的table，最好是一个id
  2. td，最好是class
  3. 要克隆的隐藏table，最好是id
  4. 新行button，最好是id

让您自由地在 HTML 中随意命名您想要的东西，而不用关心修复脚本中使用这 4 个的多个地方.

现在...这只是一个好的开始.
事实上，当用户从A国"切换到B国"时，状态下拉菜单应该是不同的！

这是我留下的唯一问题...因为我不知道您想如何加载这些选项.

我花了很多时间退出......我这样做是因为我无法相信这样一个简单"的请求会如此复杂......我不得不粉碎它
;).

这里是代码(仅限 JS)和一个有效的 CodePen 演示.

var excusiveSelect = function(tableID,rowCLASS,dummyID,cloneBtn){//最好是 ID, CLASS, ID, ID控制台清除()；//克隆函数var cloneRow = function(){var newrow = $(dummyID).find(rowCLASS).clone();$(tableID).append(newrow);刷新映射()；};//生成新行$(cloneBtn).on("click",cloneRow);//================================================================================ 初始化//选择映射var row_count;var row_map = {};//获取每个列的选择类名称var col_count = $(rowCLASS).first().find("td").length;var col_classes = [];for(i=0;i

HTML Table

Row#1 : Col 1 [Country DropDown] | Col #2 [StateDropDown]

Row#2 : Col 1 [Country DropDown] | Col 2 [StateDropDown]

table has 2 dropdownlists, for Country & State - this works on one dropdown, but its disabling other/state dropdowns as well!

Problem is, while both USA and Aust have diff states selected text, but in col2 endup with same selected State ID/value 3 (If I select California, Perth is also Disabled!, hence my code is disabling them as duplicates since its comparing the selected value and not text) for e.g. this selection disables Perth..

[USA]      ->    [California]  (value = 3)
[Australia] ->   [Perth]       (*also* has value= 3) so its disabled

How to do this as a unique combination of both country & state in each row? or just compare texts of the dropdowns?...

  1. i.e. Option1, how to check if both Country ID + State ID Value already exist?
  2. Option2, Just compare the selected texts (feels half baked)

JS Fiddle 

// 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);

otherDropdowns.find('option[value=' + selectedValue + ']').prop('disabled', true); });

<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>

*** Image to show something similar... not accurate

解决方案

This is not a perfect solution which you just can copy/paste, but it's getting real close to what you want.

I made it as a whole function with 4 arguments:

  1. The real table, preferably an id
  2. The td, preferably a class
  3. The hidden table to be cloned, preferably an id
  4. The new row button, preferably an id

Leaving you free to name your things like you want in the HTML and not caring about to fix the MULTIPLE places where those 4 are used in the script.

Now... This is just a good start.
In fact, when user changes from "Country A" to "Country B", the state dropdown should be different!

This is the only issue I left... Since I don't know how you want to load those options.

It took me quit a lot time... I did it because I couldn't believe that such a "simple" request can be that complex... I had to crush it
;).

So here is the code (JS only) and a working CodePen demo.

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("
======================================================= Country change
");

    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("
======================================================= State change
");
    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

这篇关于用于获取所有下拉值的 Jquery 选择器，2 个下拉列表的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆