显示隐藏的文本输入字段 javascript

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>

控制台中未显示错误。
这是我所指的参考。看这里
它根据我的表单属性将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

你的onchange没有开火。我认为您可以继续进行以下工作：

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

您的问题在于您为customerType调用onChange的方式。我从您的脚本中删除了它，并将其作为属性添加到 html 中作为onChange="cType(this)".这样，每次下拉列表的值更改时，都会以当前上下文 (this( 作为参数调用函数 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" 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>

Answer 4

为什么在 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 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";
  }
}