如何在 jquery 的 select 下拉列表中获取选项文本
How to get options text in select dropdown in jquery
在这里,我需要从 select 下拉列表中获取选项文本并进行一些操作。但是,我不知道我错过了什么。我得到了两个选项文本。
这是我尝试过的。
$('#sel').change(function(){
alert($(this).val());
temp = $('#sel option:selected').text();
alert("temp value " +temp);
if(temp = "Option 1")
{
alert("Option 1 is selected");
//DO SOME OPERATIONS
}
if(temp = "Option 2")
{
alert("Option 2 is selected");
//DO SOME OPERATIONS
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option
<option value="3">Option 3</option
</select>
$('#sel').change(function(){
alert($(this).val());
temp = $('#sel option:selected').text();
alert("temp value " +temp);
if(temp == "Option 1")
{
alert("Option 1 is selected");
}
if(temp == "Option 2")
{
alert("Option 2 is selected");
}
});
你的比较运算符不正确,应该是
temp == "Option 1"
没有
temp = "Option 1"
如果您不希望代码在页面加载时执行,您还应该删除函数末尾的 .change();
。
您在两个地方缺少 >
:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option> <!-- here -->
<option value="3">Option 3</option> <!--and here -->
</select>
您使用了赋值运算符。它应该是 ==
而不是 =
.
if (temp == "Option 1") {
alert("Option 1 is selected");
}
if (temp == "Option 2") {
alert("Option 2 is selected");
}
像这样尝试 -
Html -
<select id='job_title'>
<option value='' class='job' role=''>- Select -</option>
<option value='1' class='job1' role='Accountant'>Accountant</option>
<option value='2' class='job2' role='Dev. Support'>Dev. Support</option>
</select>
<br />
<input type='text' id='catch_value'>
jQuery -
$('#job_title').live('change', function(){
var m = (this.value);
var n = $('.job'+m).attr('role');
$('#catch_value').val(n);
return false;
});
例如。 - Fiddle Link
temp = "Option 1" 是错误的表达
temp == "Option 1" 或 temp === "Option 1" 是正确的表达式
见下文
$('#sel').change(function(){
alert($(this).val());
temp = $('#sel option:selected').text();
alert("temp value " +temp);
if(temp === "Option 1")
{
alert("Option 1 is selected");
//DO SOME OPERATIONS
}
if(temp === "Option 2")
{
alert("Option 2 is selected");
//DO SOME OPERATIONS
}
}).change();
$('#sel').change(function(){
var temp = this[this.selectedIndex].innerHTML;
if(temp == "Option 1") {
alert("Option 1 is selected");
}
if(temp == "Option 2") {
alert("Option 2 is selected");
}
if(temp == "Option 3") {
alert("Option 3 is selected");
}
});
同时将此 <option selected disabled>Options:</option>
添加到您的 select 框中,以便为活动提供所有选项。
在这里,我需要从 select 下拉列表中获取选项文本并进行一些操作。但是,我不知道我错过了什么。我得到了两个选项文本。 这是我尝试过的。
$('#sel').change(function(){
alert($(this).val());
temp = $('#sel option:selected').text();
alert("temp value " +temp);
if(temp = "Option 1")
{
alert("Option 1 is selected");
//DO SOME OPERATIONS
}
if(temp = "Option 2")
{
alert("Option 2 is selected");
//DO SOME OPERATIONS
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option
<option value="3">Option 3</option
</select>
$('#sel').change(function(){
alert($(this).val());
temp = $('#sel option:selected').text();
alert("temp value " +temp);
if(temp == "Option 1")
{
alert("Option 1 is selected");
}
if(temp == "Option 2")
{
alert("Option 2 is selected");
}
});
你的比较运算符不正确,应该是
temp == "Option 1"
没有
temp = "Option 1"
如果您不希望代码在页面加载时执行,您还应该删除函数末尾的 .change();
。
您在两个地方缺少 >
:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option> <!-- here -->
<option value="3">Option 3</option> <!--and here -->
</select>
您使用了赋值运算符。它应该是 ==
而不是 =
.
if (temp == "Option 1") {
alert("Option 1 is selected");
}
if (temp == "Option 2") {
alert("Option 2 is selected");
}
像这样尝试 -
Html -
<select id='job_title'>
<option value='' class='job' role=''>- Select -</option>
<option value='1' class='job1' role='Accountant'>Accountant</option>
<option value='2' class='job2' role='Dev. Support'>Dev. Support</option>
</select>
<br />
<input type='text' id='catch_value'>
jQuery -
$('#job_title').live('change', function(){
var m = (this.value);
var n = $('.job'+m).attr('role');
$('#catch_value').val(n);
return false;
});
例如。 - Fiddle Link
temp = "Option 1" 是错误的表达
temp == "Option 1" 或 temp === "Option 1" 是正确的表达式
见下文
$('#sel').change(function(){
alert($(this).val());
temp = $('#sel option:selected').text();
alert("temp value " +temp);
if(temp === "Option 1")
{
alert("Option 1 is selected");
//DO SOME OPERATIONS
}
if(temp === "Option 2")
{
alert("Option 2 is selected");
//DO SOME OPERATIONS
}
}).change();
$('#sel').change(function(){
var temp = this[this.selectedIndex].innerHTML;
if(temp == "Option 1") {
alert("Option 1 is selected");
}
if(temp == "Option 2") {
alert("Option 2 is selected");
}
if(temp == "Option 3") {
alert("Option 3 is selected");
}
});
同时将此 <option selected disabled>Options:</option>
添加到您的 select 框中,以便为活动提供所有选项。