Question

如果他们选择了特定的投递箱值，我想显示隐藏文本字段供用户输入。这是我的代码段

var cCust = document.getElementsByName('customerType');
cCust.onchange = cType;

function cType(){
		var cCust = document.getElementsByName('customerType');
		var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
		
		alert(selectValue);
		
		if (selectValue == "trd"){
			document.getElementById('tradeCustDetails').style.visibility ="visible";
			document.getElementById('retCustDetails').style.visibility="hidden";
			
		}
		else{
			document.getElementById('tradeCustDetails').style.visibility ="hidden";
		}
		
	}

<form id= "bookingForm">
<section id="placeOrder">
			<h2>Place order</h2>
		
			Customer Type: <select name="customerType">
				<option value="">Customer Type</option>
				<option value="ret">Customer</option>
				<option value="trd">Trade</option>
			</select>

			<div id="retCustDetails" class="custDetails">
				Forename <input type="text" name="forename" value=""/>
				Surname <input type="text" name="surname" value ="" />
			</div>
			<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
				Company Name <input type="text" name="companyName" />
			</div>
		</section>
    </form>

控制台中没有显示错误。
这是我所指的参考。 See here
它根据我的表单属性将getElementById更改为getElementsByNames 有什么我错过或错误？

Answer 1

您的onchange事件处理程序未分配给select元素的原因是document.getElementsByName('customerType')将返回一个数组而不是确切的引用。您应该指向索引0。见下文：

var cCust = document.getElementsByName('customerType');
cCust[0].onchange = cType;
function cType(){
		//var cCust = document.getElementsByName('customerType');
		var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
		
		alert(selectValue);
		
		if (selectValue == "trd"){
			document.getElementById('tradeCustDetails').style.visibility ="visible";
			document.getElementById('retCustDetails').style.visibility="hidden";
			
		}
		else{
			document.getElementById('tradeCustDetails').style.visibility ="hidden";
		}		
}

<form id= "bookingForm">
<section id="placeOrder">
			<h2>Place order</h2>
		
			Customer Type: <select name="customerType">
				<option value="">Customer Type</option>
				<option value="ret">Customer</option>
				<option value="trd">Trade</option>
			</select>

			<div id="retCustDetails" class="custDetails">
				Forename <input type="text" name="forename" value=""/>
				Surname <input type="text" name="surname" value ="" />
			</div>
			<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
				Company Name <input type="text" name="companyName" />
			</div>
		</section>
    </form>

Answer 2

为什么你不在html中使用直接onchange事件？

<select name="customerType" onchange="cType()">
    <option value="">Customer Type</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
</select>

<强>段

var cCust = document.getElementsByName('customerType');
cCust.onchange = cType;

function cType() {
    var selectValue = cCust[0].options[cCust[0].selectedIndex].value;

    alert(selectValue);
    debugger;
    if (selectValue == "trd") {
        document.getElementById('tradeCustDetails').style.visibility = "visible";
        document.getElementById('retCustDetails').style.visibility = "hidden";

    } else {
        document.getElementById('tradeCustDetails').style.visibility = "hidden";
    }

}

<form id= "bookingForm">
	<section id="placeOrder">
		<h2>Place order</h2>

    Customer Type: 
		<select name="customerType" onchange="cType()">
			<option value="">Customer Type</option>
			<option value="ret">Customer</option>
			<option value="trd">Trade</option>
		</select>
		<div id="retCustDetails" class="custDetails">
            Forename 
			<input type="text" name="forename" value=""/>
            Surname 
			<input type="text" name="surname" value ="" />
		</div>
		<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
            Company Name 
			<input type="text" name="companyName" />
		</div>
	</section>
</form>

Answer 3

你的onchange没有开枪。我想你可以继续下面的事情：

＆＃13;

function cType(){
    var cCust = document.getElementsByName('customerType');
    var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
    
    alert(selectValue);
    
    if (selectValue == "trd"){
        document.getElementById('tradeCustDetails').style.visibility ="visible";
        document.getElementById('retCustDetails').style.visibility="hidden";
        
    }
    else{
        document.getElementById('tradeCustDetails').style.visibility ="hidden";
    }
    
}

＆＃13;

<form id= "bookingForm">
<section id="placeOrder">
      <h2>Place order</h2>

      Customer Type: <select name="customerType" onchange="cType()">
          <option value="">Customer Type</option>
          <option value="ret">Customer</option>
          <option value="trd">Trade</option>
      </select>

      <div id="retCustDetails" class="custDetails">
          Forename <input type="text" name="forename" value=""/>
          Surname <input type="text" name="surname" value ="" />
      </div>
      <div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
          Company Name <input type="text" name="companyName" />
      </div>
  </section>
</form>

＆＃13;

Answer 4

您的问题与您为onChange调用customerType的方式有关。我从您的脚本中删除了它，并将其作为属性添加到html onChange="cType(this)"。这样，每次下拉列表的值发生更改时，都会使用当前上下文（this）作为参数调用函数cType。

希望这会有所帮助：）

＆＃13;

function cType(){
		var cCust = document.getElementsByName('customerType');
		var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
		
		alert(selectValue);
		
		if (selectValue == "trd"){
			document.getElementById('tradeCustDetails').style.visibility ="visible";
			document.getElementById('retCustDetails').style.visibility="hidden";
			
		}
		else{
			document.getElementById('tradeCustDetails').style.visibility ="hidden";
		}
		
	}

＆＃13;

<form id= "bookingForm">
<section id="placeOrder">
			<h2>Place order</h2>
		
			Customer Type: <select name="customerType" onChange="cType(this)">
				<option value="">Customer Type</option>
				<option value="ret">Customer</option>
				<option value="trd">Trade</option>
			</select>

			<div id="retCustDetails" class="custDetails">
				Forename <input type="text" name="forename" value=""/>
				Surname <input type="text" name="surname" value ="" />
			</div>
			<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
				Company Name <input type="text" name="companyName" />
			</div>
		</section>
    </form>

＆＃13;

Answer 5

document.getElementsByName('customerType')返回一个类似于元素对象的数组，其属性为name='customerType'。

document.getElementsByName('customerType')[0]将返回包含属性name='customerType'的第一个元素。

这应该有效

var cCust = document.getElementsByName('customerType')[0];
cCust.onchange = cType;

function cType() {
  var cCust = document.getElementsByName('customerType')[0];
  console.log(cCust.options[cCust.selectedIndex].value)
  var selectValue = cCust.options[cCust.selectedIndex].value;


  if (selectValue == "trd") {
    document.getElementById('tradeCustDetails').style.visibility = "visible";
    document.getElementById('retCustDetails').style.visibility = "hidden";

  } else {
    document.getElementById('tradeCustDetails').style.visibility = "hidden";
  }

}

显示隐藏文字输入字段javascript

5 个答案: