Question

我无法让JavaScript执行我需要的操作。我有一个包含美国或其他国家/地区下拉列表的表单;然后我有一个国家字段，列出了美国所有50个州的名单;然后我有一个文本字段供人们在他们不住在美国生活的国家。我想要做的是，如果在国家下拉列表中选择了United Sates，我想要＆＃34;其他＆＃34;要禁用的文本字段和启用的状态下拉列表;反之亦然，如果他们选择其他，则状态下拉列表被禁用，而其他＆＃34;其他＆＃34;文本字段已启用。
这是HTML代码：

<!DOCTYPE html>
<html>

<head>
<script src="countryValidation.js"></script>
</head>
<body>
<div id="form2">
<form name="createForm" onsubmit="return createValidation();" method="get">
<p>Country:    <select id="country">
            <option value="0">United States</option>
            <option value="1">Other</option>
           </select>&nbsp;*&nbsp;&nbsp;&nbsp;</p>
<p>State:    <select id="state">
          <option value="0">- -Select state- -</option>
          <option value="Alabama">Alabama</option>
          <option value="Alaska">Alaska</option>
          <option value="Arizona">Arizona</option>
          <option value="Arkansas">Arkansas</option>
          <option value="California">California</option>
          <option value="Colorado">Colorado</option>
          <option value="Connecticut">Connecticut</option>
          <option value="Delaware">Delaware</option>
          <option value="Florida">Florida</option>
          <option value="Georgia">Georgia</option>
          <option value="Hawaii">Hawaii</option>
          <option value="Idaho">Idaho</option>
          <option value="Illinois">Illinois</option>
          <option value="Indiana">Indiana</option>
          <option value="Iowa">Iowa</option>
          <option value="Kansas">Kansas</option>
          <option value="Kentucky">Kentucky</option>
          <option value="Louisiana">Louisiana</option>
          <option value="Maine">Maine</option>
          <option value="Maryland">Maryland</option>
          <option value="Massachusetts">Massachusetts</option>
          <option value="Michigan">Michigan</option>
          <option value="Minnesota">Minnesota</option>
          <option value="Mississippi">Mississippi</option>
          <option value="Missouri">Missouri</option>
          <option value="Montana">Montana</option>
          <option value="Nebraska">Nebraska</option>
          <option value="Nevada">Nevada</option>
          <option value="New Hampshire">New Hampshire</option>
          <option value="New Jersey">New Jersey</option>
          <option value="New Mexico">New Mexico</option>
          <option value="New York">New York</option>
          <option value="North Carolina">North Carolina</option>
          <option value="North Dakota">North Dakota</option>
          <option value="Ohio">Ohio</option>
          <option value="Oklahoma">Oklahoma</option>
          <option value="Oregon">Oregon</option>
          <option value="Pennsylvania">Pennsylvania</option>
          <option value="Rhode Island">Rhode Island</option>
          <option value="South Carolina">South Carolina</option>
          <option value="South Dakota">South Dakota</option>
          <option value="Tennessee">Tennessee</option>
          <option value="Texas">Texas</option>
          <option value="Utah">Utah</option>
          <option value="Vermont">Vermont</option>
          <option value="Virginia">virginia</option>
          <option value="Washington">Washington</option>
          <option value="West Virginia">West Virginia</option>
          <option value="Wisconsin">Wisconsin</option>
          <option value="Wyoming">Wyoming</option>
         </select>&nbsp;*&nbsp;&nbsp;&nbsp;</p>
 <p>Please type in what country you live in:
<input type="text" id="countryOther" />&nbsp;*&nbsp;&nbsp;&nbsp;</p>

这就是我想用JavaScript做的事情：

function countryValidation ()
 {
  var country = document.forms["createForm"]["country"].value;
  var countryOther = document.forms["createForm"]["countryOther"];
  var state = document.forms["createForm"]["state"];

  if (country == 0)
   {
   countryOther.createAttribute("disabled","disabled");
   }
  else if (country == 1)
   {
   state.createAttribute("disabled","disabled");
   countryOther.removeAttribute("disabled");
    }
 }

我还有另一个JavaScript函数验证整个表单，因为它是一个我将用来允许人们创建帐户的表单。我还没有达到SQL服务器的目的，也没有学过SQL，PHP或ASP.net ......我正在为一个项目做这个，并且真的可以帮助解决这个问题。

谢谢！

Answer 1

这就是你所要求的。我还添加了一个焦点命令，因为它使ui更平滑。用户单击“其他”后，焦点将自动转到“其他国家/地区”文本框，让他们键入。

http://jsfiddle.net/bhilleli/LsKDU/4/

function countryValidation()
 {
  var country = document.forms["createForm"]["country"].value;
  var countryOther = document.forms["createForm"]["countryOther"];
  var state = document.forms["createForm"]["state"];

  if (country == 0)
   {
   state.disabled=false;       //enable state
   state.focus();              //focus state 
   countryOther.value="";      //clear countryOther from any prev entry
   countryOther.disabled=true; //enable countryOther
   }
  else if (country == 1)
   {
   state.disabled=true;         //disable state
   state.value=0;               //clear state from any prev value
   countryOther.disabled=false; //enable countryOther
   countryOther.focus();        //focus on countryOther
    }
 }

Answer 2

我可能会建议采用略有不同的方法吗？这样的事，也许......

<form name="createForm" onsubmit="return createValidation();" method="get">
    <label for"country">Country</label>
    <select id="country" name="country" onchange="countryValidation();">
        <option value="0">Select Country</option>
            <option value="1">United States</option>
            <option value="2">Other</option>
           </select>
    <div id="moreInfo"></div>
</form> 
<script type="text/javascript">

function countryValidation() {
    var moreinfo = document.getElementById("moreInfo");
    var country = document.getElementById("country").value;
    if (country==1) {
        var states = ["Alabama", "Alaska"];
        var stateselect = '<select id="state" name="state">';
        for (var i=0; i<states.length; i++) {
            stateselect += '<option value="' + states[i] + '">' + states[i] + '</option>';
        }
        stateselect += '</select>';
        moreinfo.innerHTML = stateselect;
    } else if (country==2) {
        moreinfo.innerHTML = '<input type="text" id="countryOther" name="countryOther" value="Please enter the name of your country" />';
    }
}
</script>

使用JavaScript启用和禁用表单字段

2 个答案: