过滤安全Qs下拉列表

Filtering security Qs dropdown lists

本文关键字：下拉列表 Qs 安全 过滤      更新时间：2023-09-26

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

我正在看这个代码示例，但它似乎不再有效了。有人知道为什么和如何解决吗?

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

这是来自链接的示例副本:

<!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>

那个页面出问题了。查看源代码，可以看到<script>标记被转义并呈现为&lt;script&gt;。这对于显示示例以外的源代码是很好的，但是页面上没有该代码的实际副本。因此，在这个"实时"示例中，没有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的Google Chrome中不工作…

让他相信网站上有什么东西是错误的。有趣的是，在FF中运行它确实有效。

这应该适合您。更简单了

$(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所发现的，这个网站有问题，所以他的回答对于这个问题是完全可以接受的。
我将把我的代码作为备选。

相关文章：