[英]How to shorten my code with Javascript
我的任務是完成任務,但我想知道選擇框是否僅是三個選項...如果它們是5或10個選項,那么讓我們想象一下下面的if else
條件如何可以...
不僅如此,在選擇另一個選項后,其他選項的input
將作為我的代碼返回沒有任何值 。
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("");
}
});
你可以做:
$('#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();
您可以使用$("#select_vehicle")
的值動態獲取要顯示的元素的ID。 在HTML中,將class select_option
類select_option
到所有tr
,這些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>
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');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.