Question

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

我正在寻找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>

Answer 1

该页面出现了问题。查看来源，以查看<script>代码是否已转义并呈现为<script>。除了示例之外，这对于显示源代码很好 - 但是页面上没有该代码的实际副本。因此，没有JS不会像你期望的那样运行＆＃34; live＆＃34;例。除此之外，这很好。这是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已经破产。

Answer 2

这对你有用。而且它更简单

$(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所知，网站存在问题，所以他的回答完全可以接受。

过滤安全Qs下拉列表

2 个答案: