How to shorten my code with Javascript

Question

My task is what I have done but I am wondering about if the select box is not only three options... If they are 5 or 10 options so let's imagine that how the if else condition below can be...

More than that, after choosing another option, the others option's input will be returned to no value as my code.

Demo

HTML:

<table>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
<tr><td>...</td></tr>
<tr>
 <td>
 <select id="select_vehicle">
 <option value="company_vehicle">Company Vehicle</option>
 <option value="hiring_vehicle">Hiring Vehicle</option>
 <option value="taxi">Taxi</option>
 </select>
 </td>
</tr>
<tr id="company_vehicle">
 <td>Company Vehicle</td>
 <td>
 <input type="text" />
 </td>
 <td>
 <input type="radio" name="vehicle" value="bus" />Bus</td>
 <td>
 <input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle">
 <td>Hiring Vehicle</td>
 <td>
 <input type="radio" name="vehicle" value="bus" />Bus</td>
 <td>
 <input type="radio" name="vehicle" value="train" />Trolley Car</td>
 <td>
 <input type="text" />
 </td>
</tr>
<tr id="taxi">
 <td>Taxi</td>
 <td>
 <input type="checkbox" name="vehicle" value="Taxi" />Taxi
 </td>
</tr>
<tr><td>...</td></tr>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
</table>

Javascript:

var select_vehicle = $("#select_vehicle");
// Set selected item
var set_selected_item = $(select_vehicle).val("company_vehicle");
// Hide options "Hiring Vehicle" & "Taxi"
var company_vehicle = $("#company_vehicle"); // Get id "Company Vehicle"
var hiring_vehicle = $("#hiring_vehicle"); // Get id "Hiring Vehicle"
hiring_vehicle.hide();
var taxi = $("#taxi"); // Get id "Taxi"
taxi.hide();
$(select_vehicle).on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if (valueSelected == "company_vehicle") {
 company_vehicle.show();
 hiring_vehicle.hide();
 taxi.hide();
 $("#taxi input").removeAttr('checked');
 $("#hiring_vehicle input").removeAttr('checked').val("");
} else if (valueSelected == "hiring_vehicle") {
 company_vehicle.hide();
 hiring_vehicle.show();
 taxi.hide();
 $("#company_vehicle input").removeAttr('checked').val("");
 $("#taxi input").removeAttr('checked');
} else {
 company_vehicle.hide();
 hiring_vehicle.hide();
 taxi.show();
 $("#company_vehicle input").removeAttr('checked').val("");
 $("#hiring_vehicle input").removeAttr('checked').val("");
}
});

Answer 1

You can do:

$('#select_vehicle').change(function() {
 var val = this.value;
 $('#'+val).find('input[type="text"]').val('');
 $('#'+val).find('input[type="radio"]').prop('checked',false);
 $('#'+val).show().siblings('tr[id]').hide(); 
}).change();

Updated Fiddle

• PMay 1903: Thank you for your code. However, Will the others option's input be returned to no value, after choosing another option as my code.
• PMay 1903: That works well at all. I just add more code for the type[checkbox] as jsfiddle.net/huydq91/7us66/11. Am I correct? Anyway thank you very much :-)
• Felix: Yes, you're absolutely correct, or shorten your code using $('#'+val).find(':checkbox,:radio').prop('checked',false);: jsfiddle.net/7us66/12

Answer 2

You can use the value of $("#select_vehicle") to dynamically get the id of the element to show. In the HTML add the class select_option to all of the tr's that are option holders like:

<tr id="company_vehicle" class="select_option">
 <td>Company Vehicle</td>
 <td>
 <input type="text" />
 </td>
 <td>
 <input type="radio" name="vehicle" value="bus" />Bus</td>
 <td>
 <input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle" class="select_option">
 <td>Hiring Vehicle</td>
 <td>
 <input type="radio" name="vehicle" value="bus" />Bus</td>
 <td>
 <input type="radio" name="vehicle" value="train" />Trolley Car</td>
 <td>
 <input type="text" />
 </td>
</tr>
<tr id="taxi" class="select_option">
 <td>Taxi</td>
 <td>
 <input type="checkbox" name="vehicle" value="Taxi" />Taxi</td>
</tr>

Javscipt:

$("#select_vehicle").on('change', function(){
 var optionSelected = $("option:selected", this);
 var valueSelected = this.value;
 $('.select_option').hide();
 $('.select_option input[type="text"]').val('');
 $('.select_option input:checked').prop('checked', false);
 $('#'+valueSelected).show();
}).trigger('change');

• PMay 1903: That's great. I have tried that but it didn't work with the selectbox
• Adam Merrifield: @PMay1903 it should work fine if you make sure you give the correct trs the class select_option. If it doesn't let me know.
• PMay 1903: It makes me quite confused. Could you please give me a demonstration as a JSFiddle link? Anyhow I appreciate your help and I will send you a reputation if I can learn a new method as your interesting idea.