删除div，只使用选项。

Question

是否可以使用div隐藏选项中的选项，然后使用style.display = "none"

我用过的Html代码：

<div class="test">
    <div class="optioncheck" id="text place">
        <select id="status" onChange="myFunction()">
            <option value="1">Texts</option>
            <div class="options" id="text"><option value="2">Text</option></div>
            <div class="options" id="text1"><option value="3">Text1</option></div>
        </select>
    </div>
    <div class="optioncheck" id="map" style="display:none;">
        Text
        <div class="optioncheck" id="map1" style="display:none;">
            Text
        </div>
    </div>
</div>

Javascript我尝试用来隐藏变量为false的选项

var readtext = false;

if (readtext == true) {
     document.getElementById('text').style.display = "block";
} else {
     document.getElementById('text').style.display = "none";
}

Answer 1

你不能直接。相反，您必须使用（或编写）javascript库，它将演示选择选项的div。就像Select2 jQuery库一样。

Answer 2

您无法使用display:none隐藏选项中的选项，如果您想隐藏选项，可以使用

之类的内容

$( "#status option[value=1]" ).wrap( "<span>" );

并再次显示特定选项使用

if ( $( "#status option[value=2]" ).parent().is( "span" ) ){ $( "#status option[value=2]" ).unwrap(); }

这应该为你工作。

Answer 3

删除div，只使用选项。

这里你的代码没有div。

http://codepen.io/anon/pen/ryOeWo

<div class="test">
    <div class="optioncheck" id="text place">
        <select id="status" onChange="myFunction()">
          <option value="1">Texts </option>
          <option id="text" value="2">Text</option>
          <option value="3">Text1</option>
        </select>
    </div>
    <div class="optioncheck" id="map" style="display:none;">
       Text
    <div class="optioncheck" id="map1" style="display:none;">
       Text
    </div>
</div>

Answer 4

如果你只想隐藏第一个选项以外的其他选项。你可以通过简单的javascript来实现请参考这个小提琴： https://jsfiddle.net/ysd8w8sk/
假设我们有以下html：

<select id="fruits_dropdown">
<option value='1' > Apple </option>
<option value ='2'> Banana </option>
<option value ='3'> Orange </option>
<option value ='4'> Cherry </option>
</select>

然后我们可以像这样隐藏选项2和3：

document.querySelector('#fruits_dropdown option[ value="2"]').style.display='None';
document.querySelector('#fruits_dropdown option[ value="3"]').style.display='None';

使用div选择隐藏选项

4 个答案:

删除div，只使用选项。