我有一系列的選擇框,其內容是動態定義的,第二個選項框的選項取決於第一個選擇等等。我遇到的問題是,一旦我爲(例如)前兩個選擇框選擇了選項,然後想要再次開始更改第一個選擇,第二個框的顯示文本保持原樣,儘管我重置了選項。如果我下拉第二個選擇框,則顯示正確的(更新的)選項。下面的示例 - 您可以看到,在任何更改事件中,我嘗試將子選擇框的選項零設置爲等於「 - 」,以嘗試覆蓋歷史選定的文本,但這似乎不起作用。如何更改選擇文本顯示?
如何在重置選項後以編程方式更新顯示的選擇文本?
<form name="capacity">
<table>
<tr><td>Type:</td>
<td><select onchange="onchange1();" id="type">
<option value="-">-</option>
<option value="Casing">Casing</option>
<option value="Tubing">Tubing</option>
</select></td></tr>
<tr><td>OD:</td>
<td><select onchange="onchange2()" id="od">
<option value="-">-</option>
</select></td></tr>
<tr><td>Weight:</td>
<td><select id="ppf">
<option value="-">-</option>
</select></td></tr></table>
和
function onchange1() {
var type = (document.capacity.type.value);
var od = (document.capacity.od.value);
var ppf = (document.capacity.ppf.value);
document.capacity.od.options.length = 0
document.capacity.ppf.options.length = 0
document.capacity.od.options[0] = new Option("-", "-");
document.capacity.ppf.options[0] = new Option("-", "-");
if (type == "Tubing") {
document.capacity.od.options[1] = new Option("1.05", 1.05)
document.capacity.od.options[2] = new Option("1.315", 1.315)
document.capacity.od.options[3] = new Option("1.66", 1.66)
}
if (type == "Casing") {
document.capacity.od.options[1] = new Option("4.5", 4.5)
document.capacity.od.options[2] = new Option("5", 5)
document.capacity.od.options[3] = new Option("5.5", 5.5)
}
document.capacity.ppf.value = "-";
}
function onchange2() {
var type = (document.capacity.type.value);
var od = (document.capacity.od.value);
document.capacity.ppf.options.length = 0
document.capacity.ppf.options[0] = new Option("-", "-")
if (type == "Tubing") {
if (od == 1.05) {
document.capacity.ppf.options[1] = new Option("1.14", 1.14)
document.capacity.ppf.options[2] = new Option("1.2", 1.2)
document.capacity.ppf.options[3] = new Option("1.54", 1.54)
}
if (od == 1.315) {
document.capacity.ppf.options[1] = new Option("1.7", 1.7)
document.capacity.ppf.options[2] = new Option("1.72", 1.72)
document.capacity.ppf.options[3] = new Option("1.8", 1.8)
}
if (od == 1.66) {
document.capacity.ppf.options[1] = new Option("2.1", 2.1)
document.capacity.ppf.options[2] = new Option("2.3", 2.3)
document.capacity.ppf.options[3] = new Option("2.33", 2.33)
}
}
if (type == "Casing") {
if (od == 4.5) {
document.capacity.ppf.options[1] = new Option("9.5", 9.5)
document.capacity.ppf.options[2] = new Option("10.5", 10.5)
document.capacity.ppf.options[3] = new Option("11.6", 11.6)
}
if (od == 5) {
document.capacity.ppf.options[1] = new Option("11.5", 11.5)
document.capacity.ppf.options[2] = new Option("13", 13)
document.capacity.ppf.options[3] = new Option("15", 15)
}
if (od == 5.5) {
document.capacity.ppf.options[1] = new Option("14", 14)
document.capacity.ppf.options[2] = new Option("15.5", 15.5)
document.capacity.ppf.options[3] = new Option("17", 17)
}
}
你可以發佈一個完整的演示,重現你的問題,在[JS小提琴]( http://jsfiddle.net/),還是類似的? – 2012-03-16 23:21:29
和網站:http://jsfiddle.net/vinomarky/xfcdF/ – vinomarky 2012-03-17 02:18:09
它實際上似乎在JSFiddle中工作 - 將不會爲我的情況沒有爲什麼。不知道它與JQuery Mobile有什麼關係? – vinomarky 2012-03-17 02:44:57