Используйте javascript для отображения таблиц с помощью select

Я хочу отобразить определенную таблицу, когда она выбрана из раскрывающегося списка. Это до сих пор у меня есть, но это не работаетИспользуйте javascript для отображения таблиц с помощью select

javascript;

var opt = document.getElementById('select'); 

opt.onchange = function() { 
document.getElementById('t1').style.display = 'none'; 
document.getElementById('t2').style.display = 'none'; 
document.getElementById('t3').style.display = 'none'; 
document.getElementById('t4').style.display = 'none'; 
document.getElementById('t' + this.value).style.display = '';

HTML

<select name="select" id="select"> 
<option selected="selected" disabled="disabled">Please Select</option> 
<option value="1">CAT Requests</option> 
<option value="2">Stop Bulk Messages</option> 
<option value="3">PO - Deposit Transfer</option> 
<option value="4">PO - Address Change</option> 
</select> 


<table id="t1"> 
<tr> 
<td>Etisalat Number</td> 
<td><input type="text" name="eti_num"/> </td> 
</tr> 
<tr> 
<td>CAT Name</td> 
<td><input type="text" name="cat_name"/> </td> 
</tr> 
<tr> 
<td>Artist Name</td> 
<td><input type="text" name="art_name"/> </td> 
</tr> 
<tr> 
<td>Language</td> 
<td><input type="text" name="lang"/> </td> 
</tr> 
</table> 

<table id="t2"> 
<tr> 
<td>Etisalat Number</td> 
<td><input type="text" name="eti_num"/> </td> 
</tr> 
<tr> 
<td>Comment</td> 
<td><input type="text" name="comment"/> </td> 
</tr> 
</table> 

<table id="t3"> 
<tr> 
<td>Etisalat Number</td> 
<td><input type="text" name="eti_num"/> </td> 
</tr> 
<tr> 
<td>Amount</td> 
<td><input type="text" name="amt"/> </td> 
</tr> 
<tr> 
<td>Reason to Transfer</td> 
<td><input type="text" name="reason_to_transfer"/> </td> 
</tr> 
<tr> 
<td>Comment</td> 
<td><input type="text" name="comment"/> </td> 
</tr> 
</table>  

<table id="t4"> 
<tr> 
<td>Etisalat Number</td> 
<td><input type="text" name="eti_num"/> </td> 
</tr> 
<tr> 
<td>Customer Name</td> 
<td><input type="text" name="cus_name"/> </td> 
</tr> 
<tr> 
<td>Correct Address</td> 
<td><input type="text" name="corr_name"/> </td> 
</tr> 
<tr> 
<td>Comment</td> 
<td><input type="text" name="comment"/> </td> 
</tr> 
</table>

Я не понимаю, почему таблицы скрыты на PageLoad и отображается при выборе соответствующей опции.

источник

2013-11-12 Isuru

попытка document.getElementById ('т' + this.value) .style. display = 'block'; или просто измените значение на –

так на pageload, что вы хотите? и когда выбрана опция, вы хотите, чтобы она правильно отображала правильную таблицу? – j0hnstew

* Это не работает * не вопрос. – Liam

Здесь вы идете!

HTTP:/http://jsfiddle.net/tjC59/1/

<body> 
    <select name="select" id="select" onchange="changeSelection()"><!--Added the onchange Function --> 
     <option value="0">Please Select</option> 
     <option value="1">CAT Requests</option> 
     <option value="2">Stop Bulk Messages</option> 
     <option value="3">PO - Deposit Transfer</option> 
     <option value="4">PO - Address Change</option> 
    </select> 
    <table id="t1"> 
     <tr> 
      <td>Etisalat Number</td> 
      <td><input type="text" name="eti_num"/> </td> 
     </tr> 
     <tr> 
      <td>CAT Name</td> 
      <td><input type="text" name="cat_name"/> </td> 
     </tr> 
     <tr> 
      <td>Artist Name</td> 
      <td><input type="text" name="art_name"/> </td> 
     </tr> 
     <tr> 
      <td>Language</td> 
      <td><input type="text" name="lang"/> </td> 
     </tr> 
    </table> 
    <table id="t2"> 
     <tr> 
      <td>Etisalat Number</td> 
      <td><input type="text" name="eti_num"/> </td> 
     </tr> 
     <tr> 
      <td>Comment</td> 
      <td><input type="text" name="comment"/> </td> 
     </tr> 
    </table> 
    <table id="t3"> 
     <tr> 
      <td>Etisalat Number</td> 
      <td><input type="text" name="eti_num"/> </td> 
     </tr> 
     <tr> 
      <td>Amount</td> 
      <td><input type="text" name="amt"/> </td> 
     </tr> 
     <tr> 
      <td>Reason to Transfer</td> 
      <td><input type="text" name="reason_to_transfer"/> </td> 
     </tr> 
     <tr> 
      <td>Comment</td> 
      <td><input type="text" name="comment"/> </td> 
     </tr> 
    </table>  
    <table id="t4"> 
     <tr> 
      <td>Etisalat Number</td> 
      <td><input type="text" name="eti_num"/> </td> 
     </tr> 
     <tr> 
      <td>Customer Name</td> 
      <td><input type="text" name="cus_name"/> </td> 
     </tr> 
     <tr> 
      <td>Correct Address</td> 
      <td><input type="text" name="corr_name"/> </td> 
     </tr> 
     <tr> 
      <td>Comment</td> 
      <td><input type="text" name="comment"/> </td> 
     </tr> 
    </table> 
    <!-- Good Practice - Always put your scripts at the end of the Html Body --> 
    <script> 
     //When the option is changed 
     var changeSelection = function() { 
      //Hide all of the elements 
      hideAll(); 
      //If the select value is > 0 (is valid) 
      if (document.getElementById("select").value > 0) { 
       //Set the element display to "block" (block is typically the default display type) 
       document.getElementById("t" + document.getElementById("select").value).style.display = "block"; 
      } 
     }; 
     //Function to hide all of the elements 
     var hideAll = function() { 
      //Loop through the elements 
      for (var i = 1; i <= 4; i++) { 
       //Hide each one 
       document.getElementById("t" + i).style.display = "none"; 
      } 
     }; 
     //This function automaticaly executes when the page is loaded 
     (function() { 
      //Hide all of the elements 
      hideAll(); 
     })() 
    </script>

источник

2013-11-12 13:41:04

не имеют 15 пунктов, чтобы проголосовать ... проголосуйте за ответ, как только я получу 15 очков репутаций ...: D работает как волшебство ... btw Что пошло не так в моем коде? – Isuru

Я обновил код выше и включил комментарии, объясняющие все, что я здесь сделал. Надеюсь, это поможет вам. Если вам нужна дополнительная помощь или вы не знаете, что я сделал, не стесняйтесь спрашивать, и я могу объяснить дальше. Благодарю. –

Почему Java-скрипт рекомендуется добавлять в конце кода, а не в голове? @HowardRenollet – Isuru

Проблема заключается в том, что опция по умолчанию выбрана в pageload. Таким образом, ваш обработчик onchange запускается со значением «Пожалуйста, выберите» в pageload. Что это делает, так это то, что он скрывает все таблицы, а document.getElementById('tPleaseSelect') не найден, и, следовательно, таблица не отображается.

источник

2013-11-12 13:38:06 Shreyas

У меня есть скрипка, которая отображает таблицы при загрузке страницы. Затем, когда выбрана одна из таблиц, она отображает только эту таблицу. Ваш код выше отлично работает, кроме того, что вам не хватает закрытия };.

Fiddle Here

источник

2013-11-12 13:38:18 j0hnstew

Вы можете отобразить на рисунке код небольшой модификации на код:

<select name="select" id="select" onchange="displayTable();"> 



<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript"> 
function displayTable() { 
     var opt = document.getElementById('select'); 

     opt.onchange = function() { 
      document.getElementById('t1').style.display = 'none'; 
      document.getElementById('t2').style.display = 'none'; 
      document.getElementById('t3').style.display = 'none'; 
      document.getElementById('t4').style.display = 'none'; 
      document.getElementById('t' + this.value).style.display = ''; 
     }; 
    } 
</script></head>

источник

2013-11-12 13:41:33

Используйте javascript для отображения таблиц с помощью select

ответ

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