選擇-jquery在雙重條件下顯示/隱藏

我試圖在選擇雙重條件下顯示/隱藏某些單選按鈕。不知道是否可以完成。選擇-jquery在雙重條件下顯示/隱藏

我已經這第一個選擇填充第二個選擇。第二個選擇確實是幾個選擇顯示和隱藏取決於第一個選擇的選擇。

目標是根據選擇的選項顯示/隱藏某些單選按鈕。所以如果你有select1 = A和select2 = a'顯示某個單選按鈕。

到目前爲止，我管理這個成功地與一個單一選擇的條件（JS）：

$(".chosen").chosen(); 
$("#a").chosen().change(function() { 
    var value = $(this).val(); 
    if (value=="Opt1") { 
    $("#b").show(); 

    } else {$("#b").hide();} 
    }).trigger('change');

這是顯示/隱藏第二選擇的功能。

正如我已經嘗試了很多東西，並沒有成功，我到了一個絕望的解決方案，它是忘了雙重條件，並在第二個觸發單選按鈕選擇的選擇，像這樣（JS）：

$(".chosen").chosen(); 
$("#c").chosen().change(function() { 
    var value = $(this).val(); 
    if (value=="Opt1") { 
    $("#radio").show(); 

    } else {$("#radio").hide();} 
    }).trigger('change');

然而它毀了整個事情，因爲它顯示這個「c」選擇應該隱藏時根據以前的功能。任何想法如何克服這一點？

UPDATE

這是整個代碼。我刪除了id與實名無關：

<!doctype html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title> 
<link rel="stylesheet" href="docsupport/style.css"> 
<link rel="stylesheet" href="docsupport/prism.css"> 
<link rel="stylesheet" href="chosen.css"> 
<style type="text/css" media="all"> 
    /* fix rtl for demo */ 
    .chosen-rtl .chosen-drop { left: -9000px; } 
</style> 
</head> 

<body> 
<form> 

    City 
    <div id="city"> 
    <select data-placeholder="Select city" id="a" class="chosen-select" style="width:350px;" tabindex="2"> 
    <option value="London">London</option> 
    <option value="Paris">Paris</option> 
    </select> 
    </div> 
    <br> 

    Trial 
    <div id="trial1"> 
    <select data-placeholder="Select court" class="chosen-select" style="width:350px;" tabindex="2"> 
     <option value="Court of District"> Court of District </option> 
     <option value="Magistrate’s Court"> Magistrate’s Court </option> 
    </select> 
    </div> 

    <div id="trial2"> 
    <select data-placeholder="Select court2" class="chosen-select" style="width:350px;" tabindex="2"> 
     <option value="Cour de cassation"> Cour de cassation </option> 
     <option value="Cour d’apell"> Cour d’apell </option> 
    </select> 
    </div> 
    <br> 

<!--- this is a hidden radio that should show up when city== 「Paris」 and trial2== 「Cour d’apell」 ---> 

    <div id=radio1><br> 
    <input type="radio" name="radiob" value="Apell Criminal"> Apell Criminal <br> 
    <input type="radio" name="radiob" value="Apell Civil" checked> Apell Civil <br> 
    </div> 

    <br> 
    <input type="button" id="btncalc" value="Go on"> 
    </form> 
    </body> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
    <script src="chosen.jquery.js" type="text/javascript"></script> 
    <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript"> 


    var config = { 
    '.chosen-select'   : {}, 
    '.chosen-select-deselect' : {allow_single_deselect:true}, 
    '.chosen-select-no-single' : {disable_search_threshold:10}, 
    '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'}, 
    '.chosen-select-width'  : {width:"95%"} 
    } 

    for (var selector in config) { 
    $(selector).chosen(config[selector]); 
    } 

     <!--- Hides the third select and radio buttons---> 

    $('#trial2').hide(); 
    $('#radio1').hide(); 

    <!--- Shows/hides second and third select, depending on first select’s choice---> 

$(".chosen").chosen(); 
$("#city").chosen().change(function() { 
    var value = $(this).val(); 
    if (value=="London") { 
     $("#trial1").show(); 
     $("#trial2").hide(); 
    } else if (value == "Paris") { 
     $("#trial1").hide(); 
     $("#trial2").show(); 
    } 
}).trigger('change'); 



     <!--- show/hide the radio button--->  

$('.chosen').chosen().change(onChange); 

    var onChange = function() { 
    var a = $('#city').find('select').val(); 
    var b = $('#trial1').find('select').val(); 
    var c = $('#trial2').find('select').val(); 
    /* do all conditional checks here on values a, b, and c */ 
    /* here is an example check on the values of a and b: */ 
    if (a === 'Paris' && c === ‘Cour d’apell’) { 
    /* show radios */ 
    $("#radio1").show(); 
} 
}; $('.chosen').chosen().change(onChange); 


</script> 

</body> 
</html>

來源

2014-03-31 chancar

提供HTML將會有幫助。 – 76484

謝謝。 JSFiddle：http://jsfiddle.net/7VFQQ/ – chancar

你似乎在將'chosen（）應用到'div'元素。我認爲它只能應用於'select'元素。 – 76484

爲了一致起見，讓我們將每個選擇內容包裝在div中。我們可以識別div'a'，'b'和'c'，但這真的很難看，我會建議思考一些更具描述性的內容。我們可以先寫，我們要運行每當我們的任何選擇都有其價值變化的函數：

var onChange = function() { 
    var a = $('#a').find('select').val(); 
    var b = $('#b').find('select').val(); 
    var c = $('#c').find('select').val(); 
    /* do all conditional checks here on values a, b, and c */ 
    /* here is an example check on the values of a and b: */ 
    if (a === 'X' && b === 'ya') { 
     /* show radios */ 
    } 
};

然後，我們將通過我們的更改處理所有.chosen選擇功能（我們必須肯定的是，我們想要應用'選擇'的所有選擇具有「選擇」類）：

$('.chosen').chosen().change(onChange);

來源

2014-04-01 22:44:23 76484

Thaks很多。爲了一致性，我試圖將id從第一個選擇移至第一個div。它禁用了第一個選擇，所以我給了div和select兩個id。但是，我仍然無法使這個功能起作用。它只是忽略了雙重選擇，並沒有顯示任何單選按鈕。我已經完成原始帖子以顯示完整的代碼。 – chancar

您正在應用'選擇'插件方式太多次（調用'.chosen'）。我只是說只應用一次。刪除最初的'.chosen（）。更改'東西，並將'巴黎'和'倫敦'的支票移動到新的'onChange'函數中。 – 76484

和'$（「選擇」）。選擇（）'永遠不會應用，因爲你沒有帶班'chosen'（你都是'選擇-select'）任何選擇的元素。 – 76484

選擇-jquery在雙重條件下顯示/隱藏

回答

相關問題