在四個選擇框，選擇兩個不同的顏色值，並給出兩個選擇選項

Question

<select name="form_textcolor1"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 
<select name="form_textcolor2"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 
<select name="form_textcolor3"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 
<select name="form_textcolor4"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 

相同的選項休息我有四個選擇框，我想選擇兩種不同勢色值在四個選擇框，之後再給予相同的顏色值選項剩下的兩個選擇框。

我的意思是說，在第一個選擇框中選擇紅色和第二個粉紅色，然後給第三個和第四個選擇框紅色和粉紅色的選項。

I M沒有得到如何使用jQuery

Answer 1

做此嘗試（例如紅色）：

$('option').css('color', function() { 
    var color = '#000000'; 
    switch ($(this).attr('value')) { 

     case ('Red'): { 
      color = '#ff0000'; 
      break; 
     } 

     ... 

     default: { 
      break; 
     } 
    } 

    return color; 
}) 

Answer 2

我不漂亮知道如果我理解您的問題聲明清楚。請看看下面的解決方案是否是您正在尋找的。

<select id='select-1' name="form_textcolor-1"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 
<select id='select-2' name="form_textcolor-2"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 
<select id='select-3' name="form_textcolor-3"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 
<select id='select-4' name="form_textcolor-4"> 
    <option value="">Select Color</option> 
    <option value="Red">Red</option> 
    <option value="Pink">Pink</option> 
    <option value="Yellow">Yellow</option> 
    <option value="Orange">Orange</option> 
</select> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    var allOptions = ['select-1', 'select-2','select-3','select-4'], 
     selectedOptions = []; 
    $("select[id^='select-']").change(function(){ 
     selectedOptions.push($(this).attr('id')); 
     allOptions.splice($.inArray($(this).attr('id'), allOptions), 1); 

     if(selectedOptions.length == 2){ 
      for(var i = 0; i < selectedOptions.length; i++){ 
       $("#" + allOptions[i]).val($("#" + selectedOptions[i]).val()); 
      } 
     } 
    }); 
    }); 
</script> 

Here是JSFiddle。

Answer 3

反之亦然：select1和select3會互相改變。相同的2和4.我在選擇中添加了一些classess。祝你好運，有一個很好的一天

 <select class="select1" name="form_textcolor"> 
     <option value="">Select Color</option> 
     <option value="Red">Red</option> 
     <option value="Pink">Pink</option> 
     <option value="Yellow">Yellow</option> 
     <option value="Orange">Orange</option> 
    </select> 
    <select class="select2" name="form_textcolor"> 
     <option value="">Select Color</option> 
     <option value="Red">Red</option> 
     <option value="Pink">Pink</option> 
     <option value="Yellow">Yellow</option> 
     <option value="Orange">Orange</option> 
    </select> 
    <select class="select3" name="form_textcolor"> 
     <option value="">Select Color</option> 
     <option value="Red">Red</option> 
     <option value="Pink">Pink</option> 
     <option value="Yellow">Yellow</option> 
     <option value="Orange">Orange</option> 
    </select> 
    <select class="select4" name="form_textcolor"> 
     <option value="">Select Color</option> 
     <option value="Red">Red</option> 
     <option value="Pink">Pink</option> 
     <option value="Yellow">Yellow</option> 
     <option value="Orange">Orange</option> 
    </select> 

的Javascript：

  $('select').on('change', function(){ 
     var value = $('.select1').val(), 
      value3 = $('.select3').val(); 
     if(value) { 
      $('.select3').val(value); 
     } else if (value3) { 
      $('.select1').val(value3); 
     } 


     var value2 = $('.select2').val(), 
      value4 = $('.select4').val(); 
     if(value2) { 
      $('.select4').val(value2); 
     } else if (value4) { 
      $('.select2').val(value4); 
     } 
      }) 

如果你不需要是選擇三會改變選擇1，選擇4點的變化選擇2然後就刪除這兩個else if語句。

Answer 4

我希望這個代碼將會幫助你....其檢查

  <script type="text/javascript" src="jquery.js"></script> 



     <select name="form_textcolor1"> 
      <option value="">Select Color</option> 
      <option value="Red">Red</option> 
      <option value="Pink">Pink</option> 
      <option value="Yellow">Yellow</option> 
      <option value="Orange">Orange</option> 
     </select> 
     <select name="form_textcolor2"> 
      <option value="">Select Color</option> 
      <option value="Red">Red</option> 
      <option value="Pink">Pink</option> 
      <option value="Yellow">Yellow</option> 
      <option value="Orange">Orange</option> 
     </select> 
     <select name="form_textcolor3"> 
      <option value="">Select Color</option> 
      <option value="Red">Red</option> 
      <option value="Pink">Pink</option> 
      <option value="Yellow">Yellow</option> 
      <option value="Orange">Orange</option> 
     </select> 
     <select name="form_textcolor4"> 
      <option value="">Select Color</option> 
      <option value="Red">Red</option> 
      <option value="Pink">Pink</option> 
      <option value="Yellow">Yellow</option> 
      <option value="Orange">Orange</option> 
     </select> 
     <button type="submit" onclick="checkColor();" value="submit"></button> 
     <script type="text/javascript"> 
     function checkColor() { 
      var a = $("[name=form_textcolor1]").val(); 
      var b = $("[name=form_textcolor2]").val(); 
      var c = $("[name=form_textcolor3]").val(); 
      var d = $("[name=form_textcolor4]").val(); 
      if(a==b|| a==c||a==d || b==c ||b==d|| c==d) 
      { 
      if (a==b) 
      { 
       if (a==c || c==d || a==d) 
       { 
        alert("combination incorrect"); 
       } 
       else 
       { 
        alert("combination correct"); 
       } 
      } 
      if (a==c) 
      { 
       if (a==b || b==d || a==d) 
       { 
        alert("combination incorrect"); 
       } 
       else 
       { 
        alert("combination correct"); 
       } 
      } 
      if (a==d) 
      { 
       if (a==b || b==c || a==c) 
       { 
        alert("combination incorrect"); 
       } 
       else 
       { 
        alert("combination correct"); 
       } 
      } 
      if (b==c) 
      { 
       if (a==b || b==d || a==d) 
       { 
        alert("combination incorrect"); 
       } 
       else 
       { 
        alert("combination correct"); 
       } 
      } 
      if (b==d) 
      { 
       if (a==b || b==c || a==c) 
       { 
        alert("combination incorrect"); 
       } 
       else 
       { 
        alert("combination correct"); 
       } 
      } 
      if (c==d) 
      { 
       if (a==b || b==c || a==c) 
       { 
        alert("combination incorrect"); 
       } 
       else 
       { 
        alert("combination correct"); 
       } 
      } 
      } 
      else 
      { 
       alert("combination corect"); 
      } 
     } 

     </script> 

Answer 5

Fiddle Demo

var select_all = $('select[name^="form_textcolor"]'), //cache selector 
    sel_first = select_all.filter(':lt(2)'),//get 1st two select 
    sel_last = select_all.filter(':gt(1)');//get last two select 
sel_last.prop('disabled', true);//disable last two select 
sel_first.change(function() {//attach change function 1st select 
    sel_first.find('option').prop('disabled', false); //enable all 1st select options 
    sel_first.not(this).find('option[value="' + this.value + '"]').prop('disabled', true); //disable option selected by current in the other 1st select 
    $(this).find('option[value="' + sel_first.not(this).val() + '"]').prop('disabled', true); //disable option of current select which is selected by other select 
    var selected_sel = sel_first.find('option:selected[value!=""]'); //get selected options whose value is not "" from 1st two selects 
    if (selected_sel.length == 2) { //if length of selcted options is 2 from two selects 
     var selected_options = selected_sel.map(function() { //get the options selected 
      var txt = $(this).text(); 
      return '<option value="' + txt + '">' + txt + '</option>'; 
     }).get().join(''); 
     sel_last.html(selected_options).prop('disabled', false).eq(0).prop('selected', true);//assign it two last two select and enable them 
    } else { 
     sel_last.prop('disabled', true); //disable last two select if length of selected option from 1st two selects is not 2 
    } 
});