Получить выбранную опцию при нажатии или изменить событие

Question

HTML

<form name='region_filter' action='/jobseek/search_cv/' method='get'>                              
  <select id="id_region" class="" name="region">
    <option value="" selected="selected">Все</option>
    <option value="3">Донецк</option>
    <option value="2">Киев</option>
    <option value="1">Харьков</option>
  </select>   
  <input class='submit' type='button' value='adgf'/>                 
</form>

JS

$(function(){
    $('.submit').click(function(){
    var selected = $('#id_region option:selected');
        console.log(selected);
        $.ajax({
            type: 'GET',
            url: '/jobseek/search_cv/',
            data: {'region': selected.val()},
            dataType: 'html',
            success: function(data){
                $('#category').html(data);
            },      
            error: function(textStatus, jqXHR){
                console.log('sdfg');
            }
        });
    });
});

При каждом нажатии на кнопку триггера я получаю одну и ту же выбранную опцию, которая загружается со страницей, а не той, которую я выбираю непосредственно перед щелчкомкнопки.Как получить актуально выбранный вариант?

Answer 1

Сначала убедитесь, что у вас есть только один выбор с идентификатором id_region.

А затем попробуйте это:

var selectedval = $("#id_region").val();

Демо: http://jsfiddle.net/Dt8FR/

Answer 2

Проблема в том, что вы не меняете выбранный элемент.Вы просите его перейти к значению выбранного вами элемента, который является первым элементом в вашем списке.

Этот атрибут не будет удален и добавлен к текущему выбранному элементу.По крайней мере, не в jsfiddle, где я быстро скопировал и вставил его.

Есть ли код, который вы не опубликовали, или это все?

Добавлен дополнительный пример кода:

$(document).ready(function () {

    $('#id_region').change(function(){
        var option = $(this).val();
        $('option:selected', 'select').removeAttr('selected');
    $('#id_region option[value=' + option +']').attr('selected', 'selected');
    });

    $('.submit').click(function(){
    alert($('#id_region option:selected').val());
    });
});

Демо: http://jsfiddle.net/97PY6/

Answer 3

Попробуйте получить значение непосредственно из элемента select и запретить отправку формы:

$('.submit').click(function(e){ 
    e.preventDefault();
    var val = $('#id_region').val(); 
    console.log(val); 
    $.ajax({ 
        type: 'GET', 
        url: '/jobseek/search_cv/', 
        data: {'region': val}, 
        dataType: 'html', 
        success: function(data){ 
            $('#category').html(data); 
        },       
        error: function(textStatus, jqXHR){ 
            console.log('sdfg'); 
        } 
    }); 
});