如何在選擇的事件上編碼Jquery選擇？

我的代碼有點麻煩，我希望有人能幫忙。我試圖讓用戶從選擇框中選擇一個選項，然後選擇另一個選擇框以基於該查詢結果。我知道這應該是簡單的，但我似乎無法得到它的工作。這是我到目前爲止的代碼。如何在選擇的事件上編碼Jquery選擇？

第一個選擇框中：

select id="selCategory" name="category" class="chzn-select"<?php if (in_array('category',$_SESSION['iserror'])) {echo ' class="isError" ';} ?> > 
<option value ="" "> 
     <?php 
     while ($row = hesk_dbFetchAssoc($res)) 
     { 
      echo '<option value="' . $row['id'] . '"' . (($_SESSION['c_category'] == $row['id']) ? ' "' : '') . '>' . $row['name'] . '</option>'; 
     } 
     ?> 
     </select>

第二個選擇框：

<select id="selAsset" name ="asset" class="chzn-select"> 
    <option value="" selected="selected"></option> 
    <?php 
     while ($row = odbc_fetch_array($Assets)) 
     { 
     echo '<option value="' . $row['AssetID'] . '"' .   (($_SESSION['c_asset'] == $row['AssetID']) ? '    selected="selected"' : '') 
     . '>' . $row['AssetName']. '</option>'; 
     } 
     odbc_close($conLansweeper); 
    ?> 
    </select>

的代碼，如果顯示在第二個下拉框來處理。

<script language="Javascript" type="text/javascript">$(function() 
{ 
$(".selCategory").chosen().change(function(){ 
    var selectedCategory=$(this).find("option:selected").val(); 
    if(selectedCategory == "1") 
    { 
     $(.selAsset).show(); 
    } 
    else 
    { 
     $(.selAsset).hide(); 
    } 
    }); 
    }); 
    </script>

頁腳代碼：

<script type="text/javascript" src="script/chosen/jquery.min.js"></script> 
<script type="text/javascript" src="script/chosen/chosen.jquery.js"></script> 
<!--<script type="text/javascript" src="script/jquery/jquery-1.10.2.min.js"></script>--> 
<script type="text/javascript">$(".chzn-select").chosen({disable_search_threshold: 10, width:200, placeholder_text_single:" ", search_contains: true, allow_single_deselect: true });</script>

的基本目的是對要隱藏的第二選擇框當頁面載荷，當適當的值在第一選擇框被選擇的顯示。

任何人都可以幫我嗎？我還沒有設法讓這個工作，如果我能得到一個工作的例子和一些幫助，以顯示我出錯的地方真的會有所幫助。

來源

2013-10-30 Tinydan

方法1（使用現有的HTML）：

隱藏的CSS：

#selAsset { 
    display:none; 
}

然後jQuery的：

$(function(){ 
    var selCategory = $('#selCategory'); 
    $(selCategory).change(function() { 
    $('option:selected').each(function() { 
     if($(this).text() === '3') { 
     jQuery('#selAsset').show(); 
     } 
    }); 
    }); 
});

這使用text()檢查所選擇的選項。在您的代碼中，不需要.chosen()，您可以將此更改爲：$(.selAsset).show();爲：（與html匹配）。

演示：http://jsfiddle.net/dRM92/1/

一個更好的方法（從評論）：

我們可以用.change(function(){和開關的情況下，檢查該選項的值;然後相應地操作。

var selCategory = $('#selCategory'); 
var selAsset = $('#selAsset'); 

selCategory.change(function() { 
    switch ($(this, 'option:selected').val()) { 
     case "3": 
      selAsset.show(); 
      break; 
     case "please select": 
      selAsset.hide(); 
      break; 
    } 
});

這比以前的方法更具有可擴展性。有很多方法可以檢查選項的值或文本;對於這個例子，我們只需要檢查選定的值和你想要的參數。

演示：http://jsfiddle.net/gzWGQ/1/

來源

2013-10-30 20:37:33

您好託尼感謝您的答覆。它是一個很好的例子，但當原始選項被取消選擇時，如何讓第二個選擇框消失？我可以看到它的作品，但我的Jquery似乎並不想打球。 – Tinydan

@Tinydan Hi Dan，用另一種方法更新了我的答案。 –

太棒了！乾杯！ – Tinydan

如何在選擇的事件上編碼Jquery選擇？

回答

相關問題