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

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

问题描述

HTML表


行＃1：第1列 [ Country DropDown ] | Col＃2 [ StateDropDown ]



第2行：<1> [ Country DropDown ] |

2 dropdownlists ，for Country & 状态 - 这适用于一个下拉菜单，但它也禁用其他/状态下拉菜单！



问题是，虽然美国和澳大利亚都有差异选择文本，但在 col2 endup with same selected State ID / value 3 （如果我选择加州，珀斯也是禁用！因此，我的代码禁用它们作为重复，因为它比较选定的值而不是文本），例如此选择禁用珀斯.. 

  [美国]  - > [加利福尼亚]（价值= 3）
 [澳大利亚]  - > [Perth]（*还*的值为3），因此禁用

这是一个独特组合状态在每一行？或者只是比较下拉列表的文本？...


  1. 即。选项1，如何检查国家ID +状态ID值是否已经存在 ？

  2. Option2，Just比较所选文本（感觉半烤）




解决方案

这不是一个完美的解决方案，你只需要复制/粘贴，但它越来越接近你想要的。



我把它作为一个整体的功能与4个参数：


  1. 真正的表，最好是一个 id

  2. td ，最好是一个类

  3. 要克隆的隐藏的表，最好是 id

  4. 新行按钮，最好是 id

让你随意命名你想要的东西在HTML中，不关心要修复在脚本中使用那些4的多个地方。



现在...这只是一个好的开始。

事实上，当用户从国家A更改为国家B时，状态下拉菜单应该不同！



这是我离开的唯一的问题...因为我不知道你想要加载这些选项。



我花了很多时间离开我...这样做是因为我不能相信这样一个简单的请求可能是那么复杂...我不得不压制它

;）。



所以这里是代码（仅限JS）和一个工作的 CodePen 演示。

  var excusiveSelect = function（tableID，rowCLASS，dummyID，cloneBtn）{// ，CLASS，ID，ID 
 
 console.clear（）; 
 
 //克隆函数
 var cloneRow = function（）{
 var newrow = $（dummyID）.find（rowCLASS）.clone（）; 
 $（tableID）.append（newrow）; 
 refresh_mapping（）; 
}; 
 
 //生成新行
 $（cloneBtn）.on（click，cloneRow）; 
 
 // ====================================== ====================================== INITIALISATION 
 //选择映射
 var row_count; 
 var row_map = {}; 
 
 //获取每个colums的选择clas名称
 var col_count = $（rowCLASS）.first（）。find（td）。 
 var col_classes = []; （i = 0; i  col_classes [i] = $（document）.find（rowCLASS）.first（）。find（select）。 ）.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）; （i = 0; i< row_count; i ++）
 
 
 row_map [row _+ i] = {}; 
 $（tableID）.find（rowCLASS）.eq（i）.find（select）。each（function（index）{
 
 //获取选择类作为对象属性。
 var thisClasses = $（this）.attr（class）。split（）.join（。）; 
 
 //对于每一行/ select获取选择的索引
 row_map [row _+ i] [thisClasses] = $（this）[0] .selectedIndex; 
}）; 
} 
 console.log（VALUES MAPPING：+ JSON.stringify（row_map））; 
} 
 
 cloneRow（）; 
 
 // ======================================来自COLUMN＃1 
 $ b ====================================== $ b $（document）.on（change，。+ col_classes [0]，function（）{
 console.log（\\\
 ==========国家变更\） ; 
 
 refresh_mapping（）; 
 
 //禁用在所有col_classes [1]中已经选择的选项，其中col_classes [0]是相同的
（i = 0 ; 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）; 
 
 //否则启用该选项self 
} else {
 if（$（this）.closest（rowCLASS）.index（）！= i）{
 $（this）.closest（rowCLASS）.find（ + col_classes [1] +option）。eq（i）.attr（disabl ED，假）; 
} 
} 
} 
 
}）; 
 
 // ====================================== ＃2 
 
 $（document）.on（change，。+ col_classes [1]，function（）{
 console.log（\\\
 ========== =========================================状态变更） ; 
 console.clear（）; 
 refresh_mapping（）; 
 
 thisIndex = $（this）[0] .selectedIndex; //选项selectedIndex 
 thisRowIndex = $ （this）.closest（rowCLASS）.index（）; //行索引
 
 //如果同一个国家... 
 var thisCol0index = $（this）.closest（rowCLASS）。 find（。+ col_classes [0]）[0] .selectedIndex; 
 
 
 $（tableID）.find（。+ col_classes [1] ）{
 if（$（this）.closest（rowCLASS）.find（。+ col_classes [0]）[0] .selectedIndex == thisCol0index）{
 
 // Zap tout les disabled 
 $（this）.find（option：not（：eq（0）））。attr（disabled，false）; 
 
 //使用映射到基于col_class禁用（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）; 
} 
} 
 
} 
}）; 
}）; 
 // ========================================== 
} 
 
 / / 在里面！ 
 excusiveSelect（＃CountryTable，。row，＃DummyTable，＃newRow）; //最好是ID，CLASS，ID，ID


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("\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

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

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