JQuery .val() получает правильное значение, но не передает его переменной

Question

Я хочу построить строку или 'url' из выбранных значений формы. Я не хочу обрабатывать форму в любом месте, ее просто соединить строку из набора параметров.

У меня есть класс выбрать

<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) 
}); 

Answer 1

Поместите $("#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()); 
} 

как value свойство select элемента представляет собой value выбранного option.