Jquery .val()获取正确的值，但不把它传递给变量

Jquery .val() gets the correct value but doesn't pass it to variable

本文关键字：变量 val 获取 Jquery      更新时间：2023-09-26

我想从选定的表单值建立一个字符串或'url'。我不想在任何地方处理表单，它只是从一组选项中拼凑出一个字符串。

我有一个select类 
<div id="colorselect">
<select class="selectpicker" data-size="5">
                <option>red</option>
                <option>blue</option>
            </select>
</div>

默认为"红色"，当我将其更改为"蓝色"时，我可以通过在控制台中输入看到它的变化…

$( "#colorselect.select option:selected" ).val();

得到

"blue"

然后将。val()设置为变量

var urlColor = $( "#colorselect.select option:selected" ).val();
and pass to a function
function urlGenerator(urlColor){
    var url = 'http://localhost/pixacca/' + urlColor;
// Passes the url into the textarea
    $( "#output" ).val(url);
}

当我点击按钮它返回红色而不是蓝色?

<a class="btn btn-lg btn-default" id="process" href="#" role="button">Generate</a>
<div class="output"></div>
$("#process").click( function() {
    urlGenerator(urlColor)
 });

将$( "#colorselect.select option:selected" ).val() 放入函数

function urlGenerator(){
    var url = 'http://localhost/pixacca/' + $( "#colorselect.select option:selected" ).val();
    $( "#output" ).val(url);
}

如果你给一个变量赋值，这个变量不会自动更新自己。

也就是说

var urlColor = $( "#colorselect.select option:selected" ).val();

意味着:声明变量urlColor，然后将$( "#colorselect.select option:selected" ).val() 当前返回的值赋给它(即使返回值可能在一段时间后发生变化)。

更进一步，函数可以简化为

function urlGenerator(){
    $('#output').val('http://localhost/pixacca/'+$('#colorselect select').val());
}

作为select元素的value属性，表示所选option元素的value。

相关文章：