0

我有以下代码，我在小提琴中找到了以下代码作为示例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>
4

2 回答 2

1

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

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

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

于 2013-11-06T11:50:06.047 回答
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">
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>

两种工作方式

于 2013-11-06T11:54:17.773 回答