Setting Select option

Question

I have some select dropdowns

            <div class="selector">
                <div class="nomination selectors-part">Year</div>
                <div class="selection mini">
                    <select name="seltoYear">
                        <option selected disabled>Till</option>
                        <option value="2015">2015</option>
                        <option>2014</option>
                        <option>2013</option>
                        <option>2012</option>
                        <option>2011</option>
                    </select>
                </div>
                <div class="selection mini">
                    <select name="selfromYear">
                        <option selected disabled>From</option>
                        <option>1956</option>
                        <option>1986</option>
                        <option>1993</option>
                        <option>1994</option>
                        <option>1995</option>
                        <option>1996</option>
                    </select>
                </div>
                <div class="clear"></div>
            </div>

I trying to set selected value back after POSt, but nothing hapins

$(function() {

$('div.list input[type=checkbox]').on('change',onValueChange);     
$('div.selector select').on('change', onValueChange);

function onValueChange() {

    var Checked = {};
    var Selected = {};
// Hold all checkboxes
    $('div.list input[type=checkbox]:checked').each(function () {
        var $el = $(this);
        var name = $el.attr('name');
        if (typeof (Checked[name]) === 'undefined') {
            Checked[name] = [];
        }
        Checked[name].push($el.val());
    });
// Hold all dropdowns
    $('div.list select').each(function () {

        var $el = $(this);
        var name = $el.attr('name');

        if (typeof (Selected[name]) === 'undefined') {
            Selected[name] = [];
        }
        Selected[name].push($el.val());
    });

// Put all together to POST 
    $.ajax({
        url: '/Search.asp',
        type: 'POST',
        data: $.param(Checked) + "&" + $.param(Selected),
        dataType: 'text',
        success: function (data) {
            $("#ExSearchForm").html(data)
                .find('div.list input[type=checkbox],div.selector select').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value');

                    if (Checked[name] && Checked[name].indexOf(value) !== -1) {
                        $el.prop('checked', true);
                    }
                    if (Selected[name] && Selected[name].indexOf(value) !== -1) {
                        $el.prop('selected', true);
                    }
                });
        }
    });
};
});

Checkboxes are selecting as well but dropdowns do not want to be selected.

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

To set the select elements, you have to use val() like

if (Selected[name] && Selected[name].indexOf(value) !== -1) {
   $el.val(value);
}

Note, the way you calculate value will not work as your select element does not have an attribute of value

See Set selected option of select box

Update

Change

 $('div.list select').each(function () {

    var $el = $(this);
    var name = $el.attr('name');

    if (typeof (Selected[name]) === 'undefined') {
        Selected[name] = [];
    }
    Selected[name].push($el.val());
});

to

   $('div.list select').each(function () {

        var $el = $(this);
        var name = $el.attr('name');

        Selected[name] = $el.val();
    });

and

if (Selected[name] && Selected[name].indexOf(value) !== -1) {
     $el.prop('selected', true);
 }

to

if (Selected[name]) {
    $el.val(Selected[name]);
}

edited May 23 '17 at 12:30

Community

1
1

answered Jun 11 '15 at 10:52

AmmarCSE

30,079
5
45
53

Thank for answer but nothing happins – Dmitrij Holkin Jun 11 '15 at 10:58
@DmitrijHolkin, can you replicate it in a fiddle or show me how the `data` looks like in the success callback? – AmmarCSE Jun 11 '15 at 10:59
In callback i get full HTML with formed code like in my question – Dmitrij Holkin Jun 11 '15 at 11:06
@DmitrijHolkin, ok and from teh example above, which `option` value do you want to be selected? – AmmarCSE Jun 11 '15 at 11:07
i need to select value which is in Selected object where Select tag name=Name and option text=text. Or this value which was selected before sending POST. Just want to restore selected value? as after post all checkboxes and dropdowns is reseting – Dmitrij Holkin Jun 11 '15 at 11:11
@DmitrijHolkin, try ` $el.val(Selected[name][0]);` – AmmarCSE Jun 11 '15 at 11:13
Sorry, try `$el.val(Selected[name][Selected[name].length - 1]);` – AmmarCSE Jun 11 '15 at 11:16
Nope (( Maybe it happins because exist previous selected prop ? – Dmitrij Holkin Jun 11 '15 at 11:16
@DmitrijHolkin, try the last one above – AmmarCSE Jun 11 '15 at 11:17
Sorry but no selecting, in request i get strange names with added array brackets `[]` ? `seltoYear[0]=&selfromYear[]=1956` – Dmitrij Holkin Jun 11 '15 at 11:24
@DmitrijHolkin, can you replicate it in a fidle? – AmmarCSE Jun 11 '15 at 11:26
Sorry i do not know how to do that i just start to learn jquery – Dmitrij Holkin Jun 11 '15 at 11:26
Blah, i dont understand anything now ((( then i do `alert($el.val(Selected[name]));` it work as well if do`$el.val(Selected[name]);` it not works – Dmitrij Holkin Jun 11 '15 at 11:48
Oh i found mistake in Posting page, averything works now, thank you very much – Dmitrij Holkin Jun 11 '15 at 11:50

score 0 · Answer 2 · answered Jun 11 '15 at 11:14

0

Try this,

if (Selected[name] && Selected[name].indexOf(value) !== -1) {
    $el.attr('selected', 'selected');
}

answered Jun 11 '15 at 11:14

Twinkle

111
5

Setting Select option

2 Answers2