Javascript Duplicates Function 不起作用

Javascript Duplicates Function doesn't work

本文关键字：不起作用 Function Duplicates Javascript      更新时间：2023-09-26

我有以下代码，我在小提琴中找到了它作为示例 http://jsfiddle.net/x4E5Q/1/。我希望有两个相同的选择输入，当我从第一个中选择值时，第二个上的相同值是不可选择的。我把所有的东西都放在一个文件中，但它不能按预期工作。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>
<body>
<script type="text/javascript">
function preventDupes( select, index ) {
    var options = select.options,
        len = options.length;
    while( len-- ) {
        options[ len ].disabled = false;
    }
    select.options[ index ].disabled = true;
    if( index === select.selectedIndex ) {
        alert('You''ve already selected the item "' + select.options[index].text + '".'n'nPlease choose another.');
        this.selectedIndex = 0;
    }
}
var select1 = select = document.getElementById( 'select1' );
var select2 = select = document.getElementById( 'select2' );
select1.onchange = function() {
    preventDupes.call(this, select2, this.selectedIndex );
};
select2.onchange = function() {
    preventDupes.call(this, select1, this.selectedIndex );
};
</script>
<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>
<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>
</body>
</html>

您需要在页面加载后触发代码，例如波纹管

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>
<body>
<script type="text/javascript">
window.addEventListener("load", function(){
  function preventDupes( select, index ) {
      var options = select.options,
         len = options.length;
      while( len-- ) {
          options[ len ].disabled = false;
      }
      select.options[ index ].disabled = true;
      if( index === select.selectedIndex ) {
          alert('You''ve already selected the item "' + select.options[index].text + '".'n'nPlease choose another.');
          this.selectedIndex = 0;
      }
  }
  var select1 = select = document.getElementById( 'select1' );
  var select2 = select = document.getElementById( 'select2' );
  select1.onchange = function() {
      preventDupes.call(this, select2, this.selectedIndex );
  };
  select2.onchange = function() {
      preventDupes.call(this, select1, this.selectedIndex );
  };
});
</script>
<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>
<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>
</body>
</html>

或者把脚本放在你用 DOM 编码之后...

<body>
 <!-- your html -->
 <script>
  //your code
  </script>
</body>

两种工作方式

你应该在window.load上运行js（或文档就绪）。只需将整个 js 包装在这样的函数中：

window.onload = function(){
//your code
}

小提琴之所以有效，是因为它默认设置为运行 js onLoad。如果您将其设置为头部 - 没有换行，它将不再起作用。

相关文章：