javascript - 如何使用 Javascript 或 jQuery 更改 select 元素的每个选项的内容

Question

我的任务是在选择的选项发生变化时更改表中的内容。

下面的代码是我的解决方案，但我认为这根本不好。如果当选项有超过 3 个选项时怎么办...这可能会导致我在 if else 条件中修改很多内容。因此，如果您有其他解决方案，请告诉我。

我可以将 id="approve_2" 设置为我编辑的 JSFIDDLE 的默认显示吗？

Demo

HTML:

<table>
<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>
</tr>
<tr id="hiring_vehicle">
    <td>Hiring Vehicle</td>
</tr>
<tr id="taxi">
    <td>Taxi</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();
} else if (valueSelected == "hiring_vehicle") {
    company_vehicle.hide();
    hiring_vehicle.show();
    taxi.hide();
} else {
    company_vehicle.hide();
    hiring_vehicle.hide();
    taxi.show();
}
});

JSFIDDLE: http://jsfiddle.net/huydq91/7us66/3/

Answer 1

您可以缩短代码而无需重复，如下所示:

$('table tr:gt(0)').hide();
$('#select_vehicle').change(function() {
    var val = $(this).val();
    $('#'+val).show().siblings('tr').not(':first').hide();    
}).change();

<强> Updated Fiddle