2016-01-21 115 views
1

我试图使用jQuery更改下拉值中的更改标签的值,但其不起作用。请帮我解决这个问题。使用jQuery更改下拉值的更改标签的值使用jQuery

<select id="myselect"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<br/> 
<label id="label"></label> 
<br/> 
$("label").val("150.000.000"); 
$(("#myselect").val()).on('change', function() { 
    if ($("#myselect").val() == '1') { 
     $("#label").val("150.000.000"); 
    } else { 
     $("#label").val("350.000.000"); 
    } 
}); 

回答

1

您连接到change事件选择不正确,则需要提供该元素的id作为一个字符串,元素本身的不是值。另外,label元素没有必要使用text()来更改它们的值,并且您可以在change处理程序中使用this来引用select元素。试试这个:

$("label").text("150.000.000"); 
 
$("#myselect").on('change', function() { 
 
    if ($(this).val() == '1') { 
 
    $("#label").text("150.000.000"); 
 
    } else { 
 
    $("#label").text("350.000.000"); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select> 
 

 
<br/> 
 
<label id="label"></label> 
 
<br/>

你甚至可以缩短JS代码到这一点:

$("label").text("150.000.000"); 
$("#myselect").on('change', function() { 
    $("#label").text(function() { 
     return $(this).val() == '1' ? "150.000.000" : "350.000.000"; 
    }) 
}); 
+0

兄弟仍然没有工作:( – user317461

+1

它绝对应该,因为你可以从看snippet。检查控制台是否存在代码中的错误 –

+0

@RoryMcCrossan,只是一个问题,是否有区别'$(this).val()'和'$(“option:selected”,this).val()'。我看到后者[这里](http://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery),并假设它更受欢迎。 – Rajesh

0

您可以保存所有的值在数组中,并可以用价值来计算的价值指数被选中。

下面的代码片段描绘了相同:

var data = ["150.000.000", "350.000.000", "550.000.000", "750.000.000"]; 
 

 
$("#myselect").on("change", function() { 
 
    var selectedVal = $("option:selected",this).val(); 
 
    var newValue = data[parseInt(selectedVal)-1]; 
 
    $("#label").text(newValue); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select id="myselect"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select> 
 

 
<br/> 
 
<label id="label"></label> 
 
<br/>

0

试试这个代码:

$(document).ready(function() { 
    $("label").text("150.000.000"); 
    $("#myselect").on('change', function() { 
    if ($("#myselect").text() == '1') { 

     $("#label").text("150.000.000"); 

    } else { 

     $("#label").text("350.000.000"); 
    } 
    }); 
}); 
+2

您是否测试过$(“#myselect”)。text()'实际返回的内容? –

+0

是的,它返回从开始到结束的所有文本。 – Sumanta736

+0

确切地说,那很不幸,它为什么不起作用。 –