过滤安全Qs下拉列表

首先：标题应该阅读过滤安全问题下拉列表，但显然，我不能在标题中使用单词问题或问题。过滤安全Qs下拉列表

我在寻找at this code example，但它似乎不再有效。任何人都知道为什么以及如何解决它？

我想过滤安全问题，如果我从问题列表中选择问题，对于下一个问题，我不再在安全问题列表中看到问题。这是为了防止重复选择安全问题。

下面是链接样品的副本：

<!DOCTYPE html> 
<html"> 
<head> 
<meta charset="utf-8" /> 
<title>CSS Newbie Example: Filtering Select Boxes</title> 
<link rel="stylesheet" type="text/css" href="select.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script> 
$(function() { 
    $('.security').change(function() { 
     $('.security option').show(0); 
     $('.security option:selected').each(function() { 
     oIndex = $(this).index(); 
     if (oIndex > 0) { 
      $('.security').each(function() { 
       $(this).children('option').eq(oIndex).not(':selected').hide(0); 
      }); 
     } 
     }); 
    }); 
    $('.security').change(); 
}); 
</script> 
</head> 
<body> 
<div id="wrap"> 
    <h1>Intelligent Filtering of Select Boxes</h1> 
    <p>The following three select boxes contain the same options. But once you've selected one of the options from one select box, that item is removed from the subsequent boxes, preventing duplicate selections. <a href="http://www.cssnewbie.com/intelligent-select-box-filtering/">Return to the original article.</a></p> 
    <h2>Select Your Security Questions:</h2> 
    <p> 
    <select class="security" name="security1"> 
     <option value="0">Select a question from the following options.</option> 
     <option value="1">Who's your daddy?</option> 
     <option value="2">What is your favorite color?</option> 
     <option value="3">What is your mother's favorite aunt's favorite color?</option> 
     <option value="4">Where does the rain in Spain mainly fall?</option> 
     <option value="5">If Mary had three apples, would you steal them?</option> 
     <option value="6">What brand of food did your first pet eat?</option> 
    </select> 
    </p> 
    <p> 
    <select class="security" name="security2"> 
     <option value="0">Select a question from the following options.</option> 
     <option value="1">Who's your daddy?</option> 
     <option value="2">What is your favorite color?</option> 
     <option value="3">What is your mother's favorite aunt's favorite color?</option> 
     <option value="4">Where does the rain in Spain mainly fall?</option> 
     <option value="5">If Mary had three apples, would you steal them?</option> 
     <option value="6">What brand of food did your first pet eat?</option> 
    </select> 
    </p> 
    <p> 
    <select class="security" name="security3"> 
     <option value="0">Select a question from the following options.</option> 
     <option value="1">Who's your daddy?</option> 
     <option value="2">What is your favorite color?</option> 
     <option value="3">What is your mother's favorite aunt's favorite color?</option> 
     <option value="4">Where does the rain in Spain mainly fall?</option> 
     <option value="5">If Mary had three apples, would you steal them?</option> 
     <option value="6">What brand of food did your first pet eat?</option> 
    </select> 
    </p> 
</div> 
</body> 
</html>

来源

2015-06-05 Kala J

东西了与该页面。查看源代码以查看<script>标记正在转义并呈现为<script>。这适用于显示除了示例以外的源代码 - 但页面上没有该代码的实际副本。因此，在这个“现场”例子中，JS不会像你期望的那样运行。除此之外，这工作正常。这是一个使用相同代码的JSFiddle。

// -- works fine 
$(function() { 
    $('.security').change(function() { 
     $('.security option').show(0); 
     $('.security option:selected').each(function() { 
     oIndex = $(this).index(); 
     if (oIndex > 0) { 
      $('.security').each(function() { 
       $(this).children('option').eq(oIndex).not(':selected').hide(0); 
      }); 
     } 
     }); 
    }); 
    $('.security').change(); 
});

此外，检查出一些评论...

这并不在IE浏览器，Safari或Chrome浏览器。

唔...不会在谷歌浏览器在Mac OS X上工作...

信息是相信的东西就是误入歧途的网站。有趣的是，在FF中运行它确实有效。 Chrome和IE都破了。

来源

2015-06-05 19:05:53 scniro

太棒了！谢谢，我会试试看。如果时间允许，我会将其标记为已接受：D –

@KalaJ很酷，祝您好运。我添加了一些额外的发现来回答。怪异的东西与网站。无论如何，代码都很干净，这一定会对你有用 – scniro

这应该适合你。而且它的simplier

$(function() { 
    // a bit of caching: 
    var sec = $('.security'); 
    sec.change(function() { 
     sec.find('option').show().end().each(function(){ 
      $('option[value="'+$(this).val()+'"]:not(:selected):not([value="0"])', sec).hide(); 
     }); 
    }).change(); 
});

JSFiddle

编辑

我没有调查中的链接示例代码，而是我已经创建了基于需求的代码。
由于@sal niro发现，网站存在问题，所以他的回答完全可以接受。
我会离开我的代码作为替代。

来源

2015-06-05 19:22:01

过滤安全Qs下拉列表

回答

相关问题