使用Javascript从选择列表中设置选项属性 - Setting properties on option from select list using Javascript

Setting properties on option from select list using Javascript

我试图添加到由另一个开发人员创建的现有脚本。其目的是在某些情况下显示下拉列表中的项，而在其他情况下隐藏项。我添加了一些代码，我意识到我已经被告知，我试图选择不存在。这是我正在运行的?

var menuNav = document.getElementById("Dir_Drop");
var MenuVal = menuNav.options[menuNav.selectedIndex].value;

menuNav.options["member"].show();

HTML:

<div id="dir-dropdown"  >   
 <select id="Dir_Drop">
     <option value="">-- Navigate Here --</option>
 <?php if ($pageOrg->getShowTabsMembers() == "1"){ ?>
     <option value="member" onchange="return ClearPrintQueue();">Members</option>
 <?php } ?>  
 <?php if ($pageOrg->getShowTabsFamilies() == "1"){ ?> 
     <option value="family" onchange="return ClearPrintQueue();">Families</option>
  <?php } ?>
  <?php if ($pageOrg->getShowTabsGroups() == "1"){ ?> 
     <option value="group" onchange="return ClearPrintQueue();">Groups</option>
 <?php } ?>
 <?php if ($pageOrg->getShowTabsChurchStaff() == "1"){ ?>  
     <option value="staff" onchange="return ClearPrintQueue();">Church Staff</option>
<?php } ?>
    </select>

我在firefox中看到的错误是:"TypeError: menuNav.options.family is undefined"

对于解决这个问题，我将非常感谢。

options取index，而不是当前文本。您必须像这样迭代并找到当前文本:

for (var i = 0; i < menuNav.options.length; i++) {
    if (menuNav.options[i].text == "Members") {
        //found the index with text "Members" -- do logic
    }
}