Показать поля формы в зависимости от выбранной опции

Question

Я пытаюсь показать другое поле формы на основе идентификатора опции в моей форме (не значение), но я получаю одинаковые / двойные результаты независимо от того, что выбрано.

Когда я выбираю Аренда Я получаю:

• аренда выбрана
• собственный выбран

Когда я выбираю Собственный Я получаю:

• аренда выбрана
• собственный выбран

Что мне нужно сделать, чтобы это исправить?

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

Это работает! Вы должны сравнить значение, но вы проверили, определен ли объект с помощью «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";
   }
}

Answer 2

Другой вариант, используя ваш оригинальный onChange attr:

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

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

Ваша проблема была в том, что вы установили для options значение 0, и вы не проверяли свойство value HTMLSelectElement (что и передается в параметре nameSelect)

Answer 3

Возможно, вы захотите проверить выбранное option id

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

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

Вам нужно использовать nameSelect.value, чтобы получить текущее значение выбора

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

    
}

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

Answer 5

Вам нужно найти выбранный option, что вы можете сделать, задав каждому параметру различный value и просмотрев value элемента select * просто проверка статических значений параметров в HTML не покажет никаких изменений.

const rent = document.querySelector('#rent');
const own = document.querySelector('#own');

function rentown() {
  const sel = document.querySelector('select').value;
  if (!sel) return;
  if (sel === 'rentcheck') {
    rent.style.display = 'block';
    own.style.display = 'none';
  } else {
    rent.style.display = 'none';
    own.style.display = 'block';
  }
}

<select onchange="rentown();">
  <option selected="true" disabled="disabled">Please Choose</option>
  <option id="rentcheck" value="rentcheck">Rent</option>
  <option id="owncheck" value="owncheck">Own</option>
</select>


<div id="rent" style="display:none;">
  rent selected
</div>


<div id="own" style="display:none;">
  own selected
</div>