在單擊或更改事件時獲取選定選項

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為id_region 。

然后嘗試這個：

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

演示： http ： //jsfiddle.net/Dt8FR/

Answer 2

嘗試直接從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'); 
        } 
    }); 
});

Answer 3

問題是你不要改變你選擇的項目。 您要求他轉到所選項目的val，這是列表中的第一項。

此屬性不會被刪除並添加到當前拾取的項目中。 至少不會在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/