2016-06-29 18 views
-1

各テーブル行内のドロップダウン値の選択を制限しようとしているため、1つの組み合わせしか使用できません。例えば選択のみテーブル行の選択ドロップダウンの一意の組み合わせ

製品3つの色の組み合わせ(青、緑、黒)カップ(A、B、C)を有している場合ので、これらの組み合わせとの間の可能な任意の重複があってはなりません三。

したがって、製品A、カラー:グリーン、カップ:Aを2回選択することはできません。しかし、製品A、カラー:グリーン、カップ:Bを選択することができます。ここで

スクリーンショット

enter image description here

である。この例では、便利ですが、私はそれを事前に [Prevent Multiple Selections of Same Value]

感謝を正しい方法を行うことができません。

+0

正直なところ、私は問題が表示されません。ドロップダウン入力の変更イベントを使用し、無効な選択肢を他のドロップダウンから無効または削除するだけです。無礼になりたくはありませんが、単純なif-else文を使用すると解決できます。 – Kevkong

答えて

0

次の解決策を確認してください。

$(function() { 
 
\t $("[name=article]").change(callback); 
 
\t $("[name=color]").change(callback); 
 
\t $("[name=cup]").change(callback); 
 
\t 
 
\t function callback (event) { 
 
\t \t var self = $(this); 
 
\t \t var value = self.val(); 
 
\t \t var previousValue = self.data("prev"); 
 
\t \t self.data("prev", value); 
 
\t \t 
 
\t \t var selected = $("[name=" + self.attr("name") + "]"); 
 
\t \t 
 
\t \t if(value != "Select") { 
 
\t \t \t var clickedOption = self.find("option[value='" + value + "']"); 
 
\t \t \t 
 
\t \t \t if(previousValue) { 
 
\t \t \t \t selected.find("option[value='" + previousValue + "']:not()").show(); 
 
\t \t \t } 
 
\t \t \t selected.find("option[value='" + value + "']").hide(); 
 
\t \t \t clickedOption.show(); 
 
\t \t } else { 
 
\t \t \t if(previousValue) { 
 
\t \t \t \t selected.find("option[value='" + previousValue + "']:not()").show(); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
});
<html> 
 
\t <head> 
 
\t \t <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> 
 
\t \t 
 
\t </head> 
 
\t \t <div id="container"> 
 
\t \t \t <div> 
 
\t \t \t \t <select name="article"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Pro Name A">Pro Name A</option> 
 
\t \t \t \t \t <option value="Pro Name B">Pro Name B</option> 
 
\t \t \t \t \t <option value="Pro Name C">Pro Name C</option> 
 
\t \t \t \t \t <option value="Pro Name D">Pro Name D</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <select name="color"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Color A">Color A</option> 
 
\t \t \t \t \t <option value="Color B">Color B</option> 
 
\t \t \t \t \t <option value="Color C">Color C</option> 
 
\t \t \t \t \t <option value="Color D">Color D</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <select name="cup"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Cup A">Cup A</option> 
 
\t \t \t \t \t <option value="Cup B">Cup B</option> 
 
\t \t \t \t \t <option value="Cup C">Cup C</option> 
 
\t \t \t \t \t <option value="Cup D">Cup D</option> 
 
\t \t \t \t </select> 
 
\t \t \t </div> 
 
\t \t \t <div> 
 
\t \t \t \t <select name="article"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Pro Name A">Pro Name A</option> 
 
\t \t \t \t \t <option value="Pro Name B">Pro Name B</option> 
 
\t \t \t \t \t <option value="Pro Name C">Pro Name C</option> 
 
\t \t \t \t \t <option value="Pro Name D">Pro Name D</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <select name="color"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Color A">Color A</option> 
 
\t \t \t \t \t <option value="Color B">Color B</option> 
 
\t \t \t \t \t <option value="Color C">Color C</option> 
 
\t \t \t \t \t <option value="Color D">Color D</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <select name="cup"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Cup A">Cup A</option> 
 
\t \t \t \t \t <option value="Cup B">Cup B</option> 
 
\t \t \t \t \t <option value="Cup C">Cup C</option> 
 
\t \t \t \t \t <option value="Cup D">Cup D</option> 
 
\t \t \t \t </select> 
 
\t \t \t </div> 
 
\t \t \t <div> 
 
\t \t \t \t <select name="article"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Pro Name A">Pro Name A</option> 
 
\t \t \t \t \t <option value="Pro Name B">Pro Name B</option> 
 
\t \t \t \t \t <option value="Pro Name C">Pro Name C</option> 
 
\t \t \t \t \t <option value="Pro Name D">Pro Name D</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <select name="color"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Color A">Color A</option> 
 
\t \t \t \t \t <option value="Color B">Color B</option> 
 
\t \t \t \t \t <option value="Color C">Color C</option> 
 
\t \t \t \t \t <option value="Color D">Color D</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <select name="cup"> 
 
\t \t \t \t \t <option value="Select">Select</option> 
 
\t \t \t \t \t <option value="Cup A">Cup A</option> 
 
\t \t \t \t \t <option value="Cup B">Cup B</option> 
 
\t \t \t \t \t <option value="Cup C">Cup C</option> 
 
\t \t \t \t \t <option value="Cup D">Cup D</option> 
 
\t \t \t \t </select> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t <body> 
 
\t </body> 
 
</html>

+0

あなたが問題になるのは、Pro Name Aを4回しか選択できないようにするためです。似ている** Pro名A - 色A **&** Pro名A - 色B **&** Pro名A - 色C **&**プロ名A - 色D ** –

関連する問題