只有一個值是等於，並在多個選擇中選擇

我有相同的問題，因爲這工程，但是當你選擇旁邊的另一個選項停止工作。只有一個值是等於，並在多個選擇中選擇

問題再次是這樣的：如果選擇了選項4，我想顯示一個div（#showme），即使選擇了選項3 & 4，我也想工作，所以在任何給定的時間，如果選項4是選擇div應顯示。

這是JavaScript & HTML我到目前爲止有：（請注意，我有一個以上的選擇以這種形式）

$('select[multiple]').each(function() { 
 
\t $(this).change(function() { 
 
\t \t obj = '#' + $(this).attr('id') + '_desc'; 
 
\t \t if($(this).val() == "4") { 
 
\t \t \t $(obj).parent().parent().parent().removeClass('hide'); 
 
\t \t \t $(obj).css('display','block'); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t $(obj).parent().parent().parent().addClass('hide'); 
 
\t \t \t $(obj).css('display','none'); 
 
\t \t } 
 
\t }); 
 
});

<div class="row"> 
 
\t <div class="col-sm-12"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="feedback_q1">Hello?</label> 
 
\t \t \t <select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose..."> 
 
\t \t \t \t <option value="1">1</option> 
 
\t \t \t \t <option value="2">2</option> 
 
\t \t \t \t <option value="3">3</option> 
 
\t \t \t \t <option value="4">4</option> 
 
\t \t \t </select> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div class="row hide"> 
 
<div class="col-sm-12"> 
 
\t <div class="form-group"> 
 
\t \t <label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span></label> 
 
\t \t <textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="desc" rows="2"></textarea> 
 
\t </div> 
 
</div> 
 
</div>

感謝您的幫助

來源

2015-03-25 odedta

http://jsfiddle.net/arunpjohny/gmp1675r/2/ – 2015-03-25 12:06:59

當做出多個選擇時，$（this）.val（）將包含一個值的數組。遍歷它們並檢查'4'。如果$（this）.val（）爲null，那麼沒有選擇任何東西。

下面的示例完全符合您的需求，包括在評論和聊天中進行廣泛交流後的更改，包括處理文檔加載時預先選擇的最近處理值的請求。

此外，您錯過了引導JavaScript文件，並且您已包含的文件錯誤順序和錯誤的位置。下面的例子包括正確順序和位置的所有.js和.css文件。

HTML

<!-- These should be in head --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" /> 
<!-- Body content --> 
<div class="row"> 
    <div class="col-sm-12"> 
     <div class="form-group"> 
      <label for="feedback_q1">Hello?</label> 
      <select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose..."> 
       <option value="1">1</option> 
       <option value="2" selected>2</option> 
       <option value="3">3</option> 
       <option value="4" selected>4</option> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="row hide"> 
    <div class="col-sm-12"> 
     <div class="form-group"> 
      <label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span> 

      </label> 
      <textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="אנא פרט" rows="2"></textarea> 
     </div> 
    </div> 
</div> 
<!-- These should be at the end of <body> --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

的JavaScript

// Check a select for a specific value and show/hide div based on selection 
// Select will come in as a jQuery object 
function checkSelect(control) { 

    // Build selector for associated description field 
    var selector = '#' + control.attr('id') + '_desc'; 

    // Handle scenario where nothing is selected 
    if (control.val() == null) { 
     $(selector).parent().parent().parent().addClass('hide'); 
     $(selector).css('display', 'none'); 
     return; 
    } 

    // Get array containing selected values 
    var vals = control.val(); 

    // Handle scenario where something is selected 
    for (i = 0; i < vals.length; i++) { 
     if (control.val()[i] == "4") { 
      $(selector).parent().parent().parent().removeClass('hide'); 
      $(selector).css('display', 'block'); 
      return; // Stop checking as we know the value we want is selected 
     } else { 
      $(selector).parent().parent().parent().addClass('hide'); 
      $(selector).css('display', 'none'); 
     } 
    } 
} 

// This runs when the DOM is ready 
$(function() { 

    // Bind selectpicker 
    $('.selectpicker').selectpicker(); 

    // Iterate through all multiple selects 
    $('select[multiple]').each(function() { 

     // Check for pre-selected values when page first loads 
     checkSelect($(this)); 

     // Bind to change event so that values are checked after something is changed 
     $(this).change(function() { 
      checkSelect($(this)); 
     }); 
    }); 
});

演示（第3版）：http://jsfiddle.net/BenjaminRay/7ckp7epf/

來源

2015-03-25 12:07:50

評論不適合擴展討論;這個對話已經[轉移到聊天]（http://chat.stackoverflow.com/rooms/73775/discussion-on-answer-by-benjamin-ray-only-one-value-is-equal-to-and-選擇式）。 – Taryn 2015-03-25 13:53:02

謝謝bluefeet，我之前想去聊天，但是我沒有足夠的聲望點：P 不管怎樣，Benjamin Ray的解決方案非常完美，謝謝B.R我真的很感謝您的幫助，您真是太棒了！ – odedta 2015-03-25 14:33:14

我還有一個問題：這段代碼只能工作在選擇被改變的時候，我怎麼能使它在頁面加載時也工作，並且字段已經填充了選定的值「4」？我嘗試使用.ready（），但我不斷收到錯誤：/ – odedta 2015-03-26 11:59:15

只有一個值是等於，並在多個選擇中選擇

回答

相關問題