Question

我正在尝试根据表单中的选项ID（而不是值）显示不同的表单字段，但无论选择什么，我都会获得相同/双重结果。

当我选择租借时，我得到：

租借选择
自己选择

当我选择拥有时，我得到：

租借选择
自己选择

我需要做些什么来解决这个问题？

function rentown(nameSelect)
{
    if(nameSelect){
        rentcheck = document.getElementById("rentcheck").value;
        //alert(admOptionValue);
        if(rentcheck == document.getElementById("rentcheck").value){
            document.getElementById("rent").style.display = "block";
        }
        else{
            document.getElementById("rent").style.display = "none";
        }
    }

    
        if(nameSelect){
        owncheck = document.getElementById("owncheck").value;
        
        if(owncheck == document.getElementById("owncheck").value){
            document.getElementById("own").style.display = "block";
        }
        else{
            document.getElementById("own").style.display = "none";
        }
    }

    
}

<select onchange="rentown(this);">
<option selected="true" disabled="disabled">Please Choose</option> 
<option id="rentcheck" value="0">Rent</option>
<option id="owncheck" value="0">Own</option>
</select>


<div id="rent" style="display:none;">
rent selected
 </div>
 
 
 <div id="own" style="display:none;">
own selected
 </div>

Answer 1

您可能想要检查所选的option ID

＆＃13;

function rentown(nameSelect)
{
    if(nameSelect){
        var selectedOption = nameSelect.options[nameSelect.selectedIndex];
        
        if(selectedOption.id === "rentcheck"){
            document.getElementById("rent").style.display = "block";
        }
        else{
            document.getElementById("rent").style.display = "none";
        }
        
        if(selectedOption.id === "owncheck"){
            document.getElementById("own").style.display = "block";
        }
        else{
            document.getElementById("own").style.display = "none";
        }
    }
}

＆＃13;

<select onchange="rentown(this);">
  <option selected="true" disabled="disabled">Please Choose</option> 
  <option id="rentcheck" value="0">Rent</option>
  <option id="owncheck" value="0">Own</option>
</select>


<div id="rent" style="display:none;">
    rent selected
</div>
 
 
<div id="own" style="display:none;">
    own selected
</div>

＆＃13;

Answer 2

您需要找到选中 true，您可以通过为每个选项提供不同 option并查看{{ 1}} element的value - 只检查HTML中的选项'静态值不会显示任何更改。

select

value

Answer 3

您需要使用nameSelect.value来获取select

的当前值

＆＃13;

function rentown(nameSelect)
{

    if(nameSelect){
        rentcheck = document.getElementById("rentcheck").value;
        if(rentcheck == nameSelect.value){
            document.getElementById("rent").style.display = "block";
        }
        else{
            document.getElementById("rent").style.display = "none";
        }
    }

    
        if(nameSelect){
        owncheck = document.getElementById("owncheck").value;
        
        if(owncheck == nameSelect.value){
            document.getElementById("own").style.display = "block";
        }
        else{
            document.getElementById("own").style.display = "none";
        }
    }

    
}

＆＃13;

<select onchange="rentown(this);">
<option selected="true" disabled="disabled">Please Choose</option> 
<option id="rentcheck" value="0">Rent</option>
<option id="owncheck" value="1">Own</option>
</select>


<div id="rent" style="display:none;">
rent selected
 </div>
 
 
 <div id="own" style="display:none;">
own selected
 </div>

＆＃13;

Answer 4

使用原始onChange attr的另一个选项：

＆＃13;

function rentown(nameSelect)
{
if (!nameSelect) return;
if(nameSelect.value == 0){
	document.getElementById("rent").style.display = "block";
	document.getElementById("own").style.display = "none";
}
if(nameSelect.value == 1){
	document.getElementById("own").style.display = "block";
	document.getElementById("rent").style.display = "none";
}
}

＆＃13;

<select onchange="rentown(this);">
<option selected="true" disabled="disabled">Please Choose</option> 
<option id="rentcheck" value="0">Rent</option>
<option id="owncheck" value="1">Own</option>
</select>


<div id="rent" style="display:none;">
rent selected
</div>


<div id="own" style="display:none;">
own selected
</div>

＆＃13;

您的问题是您已将options都设置为0，并且您没有检查HTMLSelectElement的value属性（这是{{}}中传递的内容1}} param）

Answer 5

这个有效！您应该比较该值，但是您通过“if（nameSelect）”

检查了对象是否已定义

function rentown(nameSelect) {
   document.getElementById("rent").style.display = "none";
   document.getElementById("own").style.display = "none";
   if (nameSelect.value == 0) {
       document.getElementById("rent").style.display = "block";
   }
   if (nameSelect.value == 1) {
       document.getElementById("own").style.display = "block";
   }
}

根据所选选项显示表单字段

5 个答案: