如何使用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

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');