Jquery/Js：隱藏/顯示基於選擇框選項值的div

這些是動態相關選擇控件。（1-3,4-6,7-9）的值集決定了使用hide/show divs函數。問題是我只隱藏/顯示取決於div id的功能。我如何使功能隱藏/顯示div取決於在選擇框中找到的值（1-3,4-6,7-9）？Jquery/Js：隱藏/顯示基於選擇框選項值的div

jQuery的

$('#select').change(function() { 
    $('#sub1, #sub2, #sub3').hide(); 
    $('#sub' + $(this).find('option:selected').attr('id')).show(); 
});

HTML設置

<html> 
<select size="6" id="category"> 
    <option value="">categories 1-3 </option> 
    <option value="">----</option> 
    <option value="">----</option> 
</select> 

<div id="sub1" style="display:none"> 
<select name="subc1" size="6"> 
    <option value="1">subcategories 4-6</option> 
    <option value="2">---</option> 
    <option value="3">---</option> 
</select> 
</div> 

<div id="sub2" style="display:none"> 
<select name="subc2" size="6"> 
     <option value="4">subcategories 7-9</option> 
     <option value="5">----</option> 
     <option value="6">----</option> 
</select> 
</div> 

<div id="sub3" style="display:none"> 
<select name="subc3" size="6"> 
     <option value="7">End</option> 
     <option value="8">----</option> 
     <option value="9">----</option> 
</select> 
</div> 
</html>

來源

2012-05-29 CodingWonders90

你會好得多添加類的div元素，而不是在選擇器中使用ID屬性。 – JohnFx

其中是id爲**的DOM元素** select ** –

@ jonhecoder2346：如果問題已解決，請將標記1答案視爲已接受。 – Talha

你孃家更改您的類別select

<select size="6" id="category"> 
    <option value="1">categories 1-3 </option> 
    <option value="2">----</option> 
    <option value="3">----</option> 
</select> 


$('select#category').on('change', function() { 
    $('div[id=^sub]:visible').hide(); 
    $('div#sub' + this.value).show(); 
});

微小的變化也可以用.change()，而不是.on('change')。

$('select#category').change(function() { 
    $('div[id=^sub]:visible').hide(); 
    $('div#sub' + this.value).show(); 
});

注：

$('div[id=^sub]:visible')將指向所有div S作id開始與sub和visible。

您正在使用$('#select')需要爲$('#category')或$('select#category')。

根據您的評論：

完整的解決方案將類似於如下：

function isOnlyDashed(text) { 
    return text.replace(/-/g, '').length === 0; 
} 

$('select#category').change(function() { 
    var text = $('option:selected', this).text(); 
    if (!isOnlyDashed(text)) { 
     $('div[id=^sub]:visible').hide(); 
     $('div#sub' + this.value).show(); 
    } 
}); 


$('select[name^=subc]').change(function() { 
    var text = $('option:selected', this).text(); 
    if (!isOnlyDashed(text)) { 
     $(this).parent() // jump to parent div 
     .next('div[id^=sub]:hidden') // go to next hidden div 
     .show(); 
    } 
});

Complete Workout

來源

2012-05-29 05:12:53 thecodeparadox

謝謝，在您的幫助下，我越來越接近我的目標。唯一的選擇框是可靠的。而不是第一個選擇框顯示/隱藏所有其他選擇框，第一個選擇框將帶您到下一個選擇框，然後下一個選擇框將帶您上一個選擇框。因此，可能會一次顯示所有選擇框。這裏是你的工作jsfiddle：[JSFIDDLE]（http://jsfiddle.net/FwBb2/7/） – CodingWonders90

@ jonthecoder2346檢查我的更新答案和鍛鍊 – thecodeparadox

優秀！雖然一個小問題仍然出現：在主選擇框中單擊（----）選項時，它仍然顯示選擇框3和4.我只想要主選擇框來顯示選擇框2.其他所有工作正常:) – CodingWonders90

與您的代碼的問題是，你有一個不正確的選擇。

$('#select')...

應該是

$('select')...

此外，這部分是錯誤

$('#sub' + $(this).find('option:selected').attr('id')).show();

與此

$('#sub' + $(this).val()).show();

最後將其更換，具有相同名稱的不同元件/ id「sub1」可能是一個壞主意，t這在技術上並不違法。這當然令人困惑。

來源

2012-05-29 04:37:50 JohnFx

工作演示http://jsfiddle.net/FwBb2/1/

我已在你的jQuery代碼這是缺少休息希望這有助於細微的變化，以及在你的第一選擇下拉列表中的附加值。

請讓我知道我是否錯過了任何東西！ B-）

代碼

$('select').change(function() { 
    $('#sub1, #sub2, #sub3').hide(); 

    $('#sub' + $(this).val()).show(); 
});

HTML

<html> 
<select id="category"> 
    <option value="1">categories 1-3 </option> 
    <option value="2">----</option> 
    <option value="3">----</option> 
</select> 

<div id="sub1" style="display:none"> 
<select name="subc1" size="6"> 
    <option value="1">subcategories 4-6</option> 
    <option value="2">---</option> 
    <option value="3">---</option> 
</select> 
</div> 

<div id="sub2" style="display:none"> 
<select name="subc2" size="6"> 
     <option value="4">subcategories 7-9</option> 
     <option value="5">----</option> 
     <option value="6">----</option> 
</select> 
</div> 

<div id="sub3" style="display:none"> 
<select name="subc3" size="6"> 
     <option value="7">End</option> 
     <option value="8">----</option> 
     <option value="9">----</option> 
</select> 
</div> 
</html>

來源

2012-05-29 04:39:36

選擇下拉改變功能的值，並做了手術取決於下拉的價值，以下是示例代碼

$(function() // Shorthand for $(document).ready(function() { 
     $('select').change(function() { 
      if($(this).val() == 1) 
      { 
       $('#sub1').hide(); 
       $('#sub2').show(); 
      } 
     }); 
});

來源

2012-05-29 04:42:17 Talha

Jquery/Js：隱藏/顯示基於選擇框選項值的div

回答

相關問題