隐藏选择项目，如果另一个选择项中选择

我试图做一个选择，将显示基于关闭的你在另一个选择字段选择的选项。它看起来像这样：隐藏选择项目，如果另一个选择项中选择

  <select name="field2" id="field2" required="required"> 
       <option id="field2-1" value="os1"> 
        os1 
       </option> 
       <option id="field2-2" value="os2"> 
        os2 
       </option> 
       <option id="field2-3" value="os3"> 
        os3 
       </option> 
      </select>

然后我有这些选项的第二选择：

  <select name="field3" id="field3" required="required"> 
       <option id="field3-1" value="dl1"> 
        dl1 
       </option> 
       <option id="field3-2" value="dl2"> 
        dl2 
       </option> 
      </select>

基本上我需要发生的事情是这样的：如果OS1在第一选择中选择，那么这两个DL1 dl2将在第二个选择器中可用。

如果OS2或Os 3在第一选择器被选择时，DL1将被隐藏，并且只DL2将在第二选择器显示。

我似乎无法找到这样的固溶体，但我不是在JS是最好的，所以希望你们可以点我在正确的方向。

谢谢:)

来源

2012-08-16 Justin

香草JS解决方案（不需要jQuery的） - DEMO

var selectOne = document.getElementById("field2"); 

selectOne.addEventListener("change", function() { 
    if (this.options[this.selectedIndex].value == 'os2' || this.options[this.selectedIndex].value == 'os3') { 
     document.getElementById('field3-2').style.display = "none"; 
    } else { 
     document.getElementById('field3-2').style.display = "block"; 
    } 
}, false);

来源

2012-08-16 19:57:42

它的工作，谢谢。出于好奇，我会如何选择field3-1，因为field3-2被禁用？ – Justin 2012-08-16 20:11:30

它已被选中，因为它是唯一可用的选项 – 2012-08-16 20:18:48

问题是，即使它被选中，它似乎也不是。另一个选项是隐藏的，但它仍然表示选择了其他选项。你可以进入选择器并选择唯一的选项，这将解决它，但我希望它自动做到这一点。我发现采用的document.getElementById（“field3-2”）一个可能的修复选定=真。但它似乎没有工作的权利与我的风格。 – Justin 2012-08-16 20:32:55

有几种方法，你可以尝试这一点，但也许是最简单的一种是有两个“模板”选择隐藏的元素，然后从这些隐藏的SELECT元素的复制HTML ＃field3 SELECT元素。在这个例子中，我假设你没有使用jQuery。

例如：

<SELECT id="template_1"> 
      <option id="field3-1" value="dl1"> 
       dl1 
      </option> 
      <option id="field3-2" value="dl2"> 
       dl2 
      </option> 
</SELECT> 
<SELECT id="template_2"> 
      <option id="field3-1" value="dl1"> 
       dl1 
      </option> 
      <option id="field3-2" value="dl2"> 
       dl2 
      </option> 
</SELECT>

那么你的JavaScript是：

var field2 = document.getElementById('field2'); 
var field3 = document.getElementById('field3'); 
var template1 = document.getElementById('template_1'); 
var template2 = document.getElementById('template_2'); 
var os = field2.options[field2.selectedIndex]; 
if (os == 'os1') { 
    field3.innerHTML = template1.innerHTML; 
} 
else { 
    field3.innerHTML = template2.innerHTML; 
}

来源

2012-08-16 19:51:49 davidethell

编辑：对不起，没有意识到缺乏jquery标签。好吧，如果你想使用jQuery，下面的代码将工作：

$('#field2').change(function(){ 
    if($(this).val() === 'os2' || $(this).val() === 'os3'){ 
     $('#field3-1').hide(); 
    } 
    else{ 
     $('#field3-1').show(); 
    } 
});

来源

2012-08-16 19:51:51 wanovak

的问题与此代码是它是破坏性的。一旦你选择了os2或者os3，如果他们改变主意并且再次选择os1，你就不能得到field3-1。 – davidethell 2012-08-16 19:57:16

@davidethell好点。我会更新答案。 – wanovak 2012-08-16 19:58:25

@wanovak谢谢，并为标签问题感到抱歉。问题是，即使选项是隐藏的，喜欢它的选择，它仍然看起来。有没有办法强制选择其他选项？ – Justin 2012-08-16 20:49:00

隐藏选择项目，如果另一个选择项中选择

回答

相关问题