![](/img/trans.png)
[英]How to dynamically change value from drop-down list with simple javascript?
[英]How to Javascript change Label value from selecting Checkbox and drop-down list
我有2個復選框,其中一個包含5個元素的下拉列表。
首先必須檢查checbox B是否被選中,然后Textbox僅可以顯示值,否則為空。 其次,如果選中了復選框B,並且從下拉列表中選擇了一個值,則文本框必須立即在更改上顯示值。
<input type="checkbox" name="events" value="event02 />
Event 01
</input>
<br/>
<input type="checkbox" name="events" value="event02 />
Event 02:
<select name="selectOne" onchange="amount()">
<option value="00" selected="selected">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
</select>
<br/>
<input type="text" name="displayTxtBox" id="displayTxtBox" size="10" maxlength="50" value="" />
我不知道在Javascript中如何編寫代碼來檢測到檢測到的復選框B,並且下拉列表選擇了僅在文本框中顯示值。
我認為它需要onChange和Javascript中的某些功能。
請指導我。
給定已更正的HTML,並添加了id
屬性和label
元素,以為各種表單元素提供其他點擊目標:
<input type="checkbox" id="input1" name="events" value="event01" />
<label for="input1">Event 01</label>
<br/>
<input type="checkbox" id="input2" name="events" value="event02" />
<label for="input2">Event 02</label>
<select name="selectOne">
<option value="00" selected="selected">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
</select>
<br/>
<input type="text" name="displayTxtBox" id="displayTxtBox" size="10" maxlength="50" value="" />
以下JavaScript似乎可以達到您預期的效果,盡管我不確定您的意圖是什么:
function showAmount(el, selectEl, targetEl, clearOnUncheck) {
/* the following is an optional, Boolean, variable, so a ternary
conditional is used, which checks that 'clearOnUncheck' exists,
if it does then the variable is assigned its own value,
if *not* then it's explicitly assigned the value of false
note it's Boolean, *not* a string: don't quote this value */
var clearOnUncheck = clearOnUncheck ? clearOnUncheck : false;
if (!el || !selectEl || !targetEl) {
// sanity checking, these are *required* arguments for the function
return false;
}
// if the checkbox is checked, continue
else if (el.checked) {
/* assigning the conditions I'm testing to variables, so if conditions
change they only have to be changed in one place */
var index = selectEl.selectedIndex,
textcontent = (typeof(el.textContent) != 'undefined');
if (textcontent) {
// up-to-date browsers
/* sets the value of the text-input to be the string contained
within the selected option from the select element */
targetEl.value = selectEl
.getElementsByTagName('option')[index]
.textContent;
}
else if (window.innerText) {
// IE < 8
// as above, but uses innerText for IE
targetEl.value = selectEl
.getElementsByTagName('option')[index]
.innerText;
}
}
/* if the checkbox is unchecked, and you've set the Boolean for the
optional clearOnUncheck to true (remember, *not* a string, don't quote) */
else if (!el.checked && clearOnUncheck) {
/* if clearOnUncheck is true, the value is cleared from the text-input,
if clearOnUncheck is set to false, or not-set, the text-box value
persists after unchecking the checkbox */
targetEl.value = '';
}
}
// references to the elements
var input2 = document.getElementById('input2'),
select = document.getElementsByName('selectOne')[0],
textInput = document.getElementById('displayTxtBox');
// binding the function to the onchange event of the input2 and selectOne elements.
input2.onchange = function() {
showAmount(input2, select, textInput, true);
};
select.onchange = function() {
/* because the clearOnUncheck argument depends on the changing of the
checkbox there's no point in passing it to the showAmount() function
in the select's onchange event-handler */
showAmount(input2, select, textInput);
};
帶有clearOnUncheck == true
JS小提琴演示
帶有clearOnUncheck == false
JS小提琴演示
未設置帶有clearOnUncheck
JS Fiddle演示
參考文獻:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.