如何使用Javascript缩短代码

我的任务就是我所做的，但我想知道选择框是否不仅仅是三个选项。。。如果它们是5个或10个选项，那么让我们想象一下下面的

If-else

条件如何

更重要的是，在选择另一个选项后，其他选项的

输入将返回为无值，作为我的代码


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>

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

你可以做：

$('#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();

您可以使用
$（“#选择车辆”）
的值动态获取要显示的元素的id。在HTML中，将类
select_option
添加到所有属于选项持有者的
tr
，如：

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

谢谢你的代码。但是，在选择另一个选项作为“我的代码”后，others选项的
输入是否会返回为无值。这一点很好。我只是为
类型[checkbox]
添加了更多的代码。我说得对吗？无论如何，非常感谢：-）是的，您完全正确，或者使用
$（'#'+val）缩短代码。查找（':checkbox，：radio'）.prop（'checked'，false）：太好了。我已经试过了，但它不适用于selectbox@PMay1903如果您确保在类
select\u选项中指定了正确的
tr
s，那么它应该可以正常工作。如果不让我知道，我会很困惑。你能给我一个演示作为一个JSFIDLE链接吗？无论如何，我感谢你的帮助，如果我能学习一种新的方法作为你有趣的想法，我会给你一个声誉。
$("#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');