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

回答

相关问题