Скрыть или показать div на основе выбора опций

Я пытаюсь показать или скрыть div на основе выбранной опции. Когда Клиент выбран, он должен показывать retCustDetails, и когда Trade выбрана, он должен показывать tradeCustDetails.Скрыть или показать div на основе выбора опций

Пожалуйста, дайте мне знать, что мне не хватает в кодах ниже.

<h2>Place order</h2> 
      Your details 
      Customer Type: <select id="show" name="customerType" onchange="change()"> 
       <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" id="forename" /> 
       Surname <input type="text" name="surname" id="surname" /> 
      </div> 
      <div id="tradeCustDetails" class="custDetails" style="visibility:hidden"> 
       Company Name <input type="text" name="companyName" id="companyName" /> 
      </div>

function change(obj) { 

    var selectBox = obj; 
    var selected = selectBox.options[selectBox.selectedIndex].value; 
    var retCustDetails = document.getElementById("retCustDetails"); 
    var tradeCustDetails = document.getElementById("tradeCustDetails"); 

    if(selected === '1'){ 
     retCustDetails.style.display = "block"; 
     tradeCustDetails.style.display = "none"; 
    } 
    else{ 
     retCustDetails.style.display = "none"; 
     tradeCustDetails.style.display = "block"; 
    } 
}

источник

2015-11-29 Doran L

jsfiddle пожалуйста .. – Aminadav

Существовали некоторые незначительные ошибки в коде, я исправил его, чтобы сделать его работу -

<body> 
 
<h2>Place order</h2> 
 
      Your details 
 
      Customer Type: <select id="show" name="customerType" onchange="change(this)"> 
 
       <option value="">Customer Type?</option> 
 
       <option value="ret">Customer</option> 
 
       <option value="trd">Trade</option> 
 
      </select> 
 

 
      <div id="retCustDetails" class="custDetails" style="display:none"> 
 
       Forename <input type="text" name="forename" id="forename" /> 
 
       Surname <input type="text" name="surname" id="surname" /> 
 
      </div> 
 
      <div id="tradeCustDetails" class="custDetails" style="display:none"> 
 
       Company Name <input type="text" name="companyName" id="companyName" /> 
 
      </div> 
 
<script> 
 

 
function change(obj) { 
 

 
    var selectBox = obj; 
 
    var selected = selectBox.options[selectBox.selectedIndex].value; 
 
    var retCustDetails = document.getElementById("retCustDetails"); 
 
    var tradeCustDetails = document.getElementById("tradeCustDetails"); 
 

 
    if(selected == 'ret'){ 
 
     retCustDetails.style.display = "block"; 
 
     tradeCustDetails.style.display = "none"; 
 
    } 
 
    else{ 
 
     retCustDetails.style.display = "none"; 
 
     tradeCustDetails.style.display = "block"; 
 
    } 
 
} 
 
</script> 
 
\t \t \t 
 
\t \t \t </body>

источник

2015-11-29 06:51:14 Murli

Вы используете visibility:hidden в вашем html, но в вашем js Ваше изменение display собственности. visibility:hidden - display:none.

Использование this в качестве параметра change FUNTION как onchange="change(this)"

И изменение функции JS в следующем.

function change(obj) { 

    var selectBox = obj.value; 
    var retCustDetails = document.getElementById('retCustDetails'); 
    var tradeCustDetails = document.getElementById('tradeCustDetails'); 

    if(selectBox == 'ret'){ 
     retCustDetails.style.display = "block"; 
     tradeCustDetails.style.display = "none"; 
    } 
    else{ 
     retCustDetails.style.display = "none"; 
     tradeCustDetails.style.display = "block"; 
    } 
}

источник

2015-11-29 06:51:59 Azim

передать этот в качестве аргумента методу изменение(). Также изменить, если условие, как, как показано ниже

if(selected === 'ret'){ 
//... 
}

потому что вы получите выбранное значение, он дает либо «РЭТ» или «TRD»

изменить tradeCustDetails видимость: скрытый, чтобы отобразить : none Попробуйте этот код.

function change(obj) { 
 
    //alert(obj); 
 
    var selectBox = obj; 
 
    var selected = selectBox.options[selectBox.selectedIndex].value; 
 
    var retCustDetails = document.getElementById("retCustDetails"); 
 
    var tradeCustDetails = document.getElementById("tradeCustDetails"); 
 
    if(selected === 'ret'){ 
 
     retCustDetails.style.display = "block"; 
 
     tradeCustDetails.style.display = "none"; 
 
    } 
 
    else{ 
 
     retCustDetails.style.display = "none"; 
 
     tradeCustDetails.style.display = "block"; 
 
    } 
 
}

<h2>Place order</h2> 
 
      Your details 
 
      Customer Type: <select id="show" name="customerType" onchange="change(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" id="forename" /> 
 
       Surname <input type="text" name="surname" id="surname" /> 
 
      </div> 
 
      <div id="tradeCustDetails" class="custDetails" style="display:none"> 
 
       Company Name <input type="text" name="companyName" id="companyName" /> 
 
      </div>

Надеется, что это поможет.

источник

2015-11-29 06:52:57 balachandar

Это альтернативный метод. Это тоже работает. Приветствия!

<script> 
jQuery(function($) { 
    $('#show').change(function(){ 
     var val = $(this).val(); 
     if(val == 'ret') { 
      $('#retCustDetails').show(); 
      $('#tradeCustDetails').hide(); 
     } else if(val == 'trd') { 
      $('#tradeCustDetails').show(); 
      $('#retCustDetails').hide(); 
     } else { 
      $('#tradeCustDetails').hide(); 
      $('#retCustDetails').hide(); 
     } 
    }); 
}); 
</script> 

<h2>Place order</h2> 
Your details 
Customer Type: <select id="show" name="customerType"> 
    <option value="">Customer Type?</option> 
    <option value="ret">Customer</option> 
    <option value="trd">Trade</option> 
</select> 

<div id="retCustDetails" class="custDetails" style="display:none"> 
    Forename <input type="text" name="forename" id="forename" /> 
    Surname <input type="text" name="surname" id="surname" /> 
</div> 
<div id="tradeCustDetails" class="custDetails" style="display:none"> 
    Company Name <input type="text" name="companyName" id="companyName" /> 
</div>

источник

2015-11-29 07:04:17 DpEN

Скрыть или показать div на основе выбора опций

ответ

Смежные вопросы