Question

为客户工作项目......我想根据下拉列表的选择更改#sandy范围的值。因此，例如，如果选择了选项文本1，则span #sandy将说：＆＃34;这适用于＃sandy2＆＃34;，如果选择了选项文本2，则跨度#sandy将说＆＃34;这不适用于＃ sandy2＆＃34;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>SANDBOX TEST</title>
<script>
function checkField(val)
{
alert("The input value has changed. The new value is: " + val);
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
i = 0;
$(document).ready(function () {
    $("#clientname").keyup(function () {
        $("#pizza").text(i += 1);
        var stt = $(this).val();
        $("#sandy2").text(stt);
    });
});
</script>
</head>
<body>
<p>Modify the text in the input field, then click outside the field to fire onchange.    </p>
<table style="width: 300px">
<tr>
    <td style="width: 150px">Enter some text: </td>
    <td> 
    <input type="text" name="txt" id="clientname" value="" onchange="checkField(this.value)" style="width: 150px"/></td>
</tr>
<tr>
    <td style="width: 150px">Selection:</td>
    <td> <select name="Select1" style="width: 150px" onchange="jsFunction()">
            <option value="" disabled selected style="display:none;">Choose An Option!</option>
            <option>Option Text 1</option>
            <option>Option Text 2</option>
        </select></td>
</tr>
</table>
<br/>
======================================
<br/>
<span id="sandy">This is a test for <span id="sandy2"></span></span>
</body>
</html>

Answer 1

给select一个id，并为每个选项赋值：

<select id="selector" name="Select1" style="width: 150px" onchange="jsFunction()">
        <option value="" disabled selected style="display:none;">Choose An Option!</option>
        <option value="1">Option Text 1</option>
        <option value="2">Option Text 2</option>
</select>

然后当更改select时，您可以获得所选的值：

var selected = $('#selector option:selected').val();

然后在您的更改处理程序或您的键盘处理程序中，您可以获取所选值并相应地执行操作。

此外，将内联处理程序与jQuery混合是不好的做法。

从行

中删除onchange

<select id="selector" name="Select1" style="width: 150px" onchange="jsFunction()">

并像这样添加：

$(function() {
  $('#selector').on('change', jsFunction);
});

Answer 2

我不明白你的观点。但是根据这一点，我能理解什么。或者你可以看到http://jsfiddle.net/X83ex/1/

<select name="Select1" id="selection" style="width: 150px" onchange="jsFunction(this)">
        <option value="" disabled selected style="display:none;">
          Choose An Option!       
       </option>
        <option>Option Text 1</option>
        <option>Option Text 2</option>
    </select>

你可以用你的javascript写作。

function jsFunction(that){
    $('#sandy2').text($(that).val());
}

jQuery：在选项选择上更改跨度值

2 个答案: