下拉框-onchange和onselect

Question

我需要幫助，我是html的新手。

從下拉菜單中選擇選項時，我希望html將值放在單詞中。例如，當我從下拉列表中選擇“ 1”時，它必須顯示“一個”。當我從下拉列表中選擇“ 2”時，它必須顯示“兩個” ”

怎么做？？

<HTML>
<Table border=10>

<TR>
<TD>Select Number</TD>
<TD><Select>
<option>1</option>
<option>2</option>
<option>3</option>
</Select></TD>
</TR>

<tr>
<td>In Words</td>
<td><input type="text" readonly></td>
</tr>

</Table>
</HTML>

請寫劇本給我看...

Answer 1

如果我了解您想要的內容，則需要一些javascript來找到您選擇的內容，並采用該“字符串”並將其推入元素中，以供用戶查看。

這是一個工作示例。 下次您問一個問題時，嘗試制作一個。 歡迎使用堆棧溢出。

http://jsfiddle.net/sheriffderek/6vp5Lskn/

的HTML

<select name='my_select' id='my_select'>

    <option value='1'>Option 1</option>
    <option value='2'>Option 2</option>
    <option value='3'>Option 3</option>
    <option value='4'>Option 4</option>
    <option value='5'>Option 5</option>

</select>

<div id="outcome">
    You have selected: <span></span>
</div>

javascript（jQuery）

var selectedOption; // define this variable

// when the select is changed...
$('#my_select').on('change', function() {
    // get the option that was selected
    selectedOption = $( "#my_select option:selected" ).text();
    // put the option in the place you want it
    $('#outcome span').html(selectedOption);
});

Answer 2

非jQuery解決方案 ：

首先，提供您的選擇標簽和輸入標簽ID，以及您的選項值（value =“”）。 然后在選擇標簽中添加一個onchange =“”-listener，並創建一個函數來執行您要執行的操作（即檢查所選值並將其顯示在輸入字段中），如下所示：

 function showValue() { var x = document.getElementById("mySelect").value; document.getElementById("mySelection").value = "You selected: " + x; }

 <Table border=10> <tr> <td>Select Number</td> <td><Select onchange="showValue()" id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </Select></td> </tr> <tr> <td>In Words</td> <td><input type="text" id="mySelection"></td> </tr> </Table>

下拉框-onchange和onselect

問題描述

2 個解決方案

解決方案1
2 已采納 2015-03-04 08:01:30

的HTML

javascript（jQuery）

解決方案2
2 2015-03-04 08:08:48

下拉框-onchange和onselect

問題描述

2 個解決方案

解決方案1 2 已采納 2015-03-04 08:01:30

的HTML

javascript（jQuery）

解決方案2 2 2015-03-04 08:08:48

解決方案1
2 已采納 2015-03-04 08:01:30

解決方案2
2 2015-03-04 08:08:48