how to make the new option that has been added to a select tag as selected in Jquery

Question

I have a Jquery script where I am doing an ajax call and the value that I get in return I am using it to add it in the select option , Drop down menu ,

My Problem is that its not showing as selected ,

The JS is as follows

(function($, window) {
      $.fn.replaceOptions = function(options) {
        var self, $option;

        this.empty();
        self = this;

        $.each(options, function(index, option){
          $option = $("<option></option>")
            .attr("value", option.value)
            .text(option.text);
          self.append($option);
        });
        this.prop('disabled', false);
      };
    })(jQuery, window);

$(document).on('click', ".add1", function () {
    var val1 = $(".selectLevel", $(this).parents("tr")).eq(0).val(),
        val2 = $(".selectLevel", $(this).parents("tr")).eq(1).val(),
        url = "http://www.xxxyz.com/xxx/xxx/web/ajax.php",
        val3 = $(this).closest('tr').find('input').val(),
        closeSelect = $(this).closest('td').find('select');

    if (val3 == '' || val3 == null) alert('You need to add value in the input box');
    else {
        var posting = $.post(url, {
            im_core: 'selectAjaxUpdate',
            geo_level1: val1,
            geo_level2: val2,
            geo_level3: val3,
            pais: <? php echo $_POST['pais'] ?>
        }).done(function (data) {
            var obj = $.parseJSON(data);
            $.each(obj, function (key, value) {
                myArray.push({
                    text: obj[key].value,
                    value: obj[key].id
                });
            });
            //$(closeSelect).html('myArray');
            $(closeSelect).replaceOptions(myArray);
        });
    }
});

Can any one help me , With this

Thanks in Advance

Please tell us if you are using any plugins for the dropdown menu — Spokey, Jan 30 '15 at 11:14
replaceOptions could be a jquery extention function. refer this answer http://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery — Sameer Azazi, Jan 30 '15 at 11:22
@Spokey no I am not using any plugin Replaceoption() is a Jquery extention function — Vikram Anand Bhushan, Jan 30 '15 at 11:27
@Spokey my bad wait I will update my question its function I have — Vikram Anand Bhushan, Jan 30 '15 at 11:30

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

The problem in

$(closeSelect).replaceOptions(myArray);

try change to

closeSelect.replaceOptions(myArray);

And if you use replaceoptions method from here, it not support setting selected value,because it only take array of objects and appent them to select

edited May 23 '17 at 12:06

Community

1
1

answered Jan 30 '15 at 11:20

vborutenko

4,323
5
28
48

Yes I am using it from the link , SO what do you suggest me to do inorder to fix this – Vikram Anand Bhushan Jan 30 '15 at 11:39
I suggset rewrite replaceOptions method,It should take second parameter with selected value. – vborutenko Jan 30 '15 at 11:46
I came accross this small code snippet , `$(closeSelect ,'option').filter(function() { return this.value.indexOf( val3 ) > -1; }) .prop('selected', true);` Tried to use it but it wont work – Vikram Anand Bhushan Jan 30 '15 at 11:59
Can you give me a jsfiddle link ? I would be able to understand more properly. – Sameer Azazi Jan 30 '15 at 12:48

score 0 · Answer 2 · answered Jan 30 '15 at 11:20

You are changing source of dropdown but you are not setting new value once you source gets change. You just need to set selected vaulue.

$(document).on('click', ".add1", function () {
    var val1 = $(".selectLevel", $(this).parents("tr")).eq(0).val(),
        val2 = $(".selectLevel", $(this).parents("tr")).eq(1).val(),
        url = "http://www.xxxyz.com/xxx/xxx/web/ajax.php",
        val3 = $(this).closest('tr').find('input').val(),
        closeSelect = $(this).closest('td').find('select');

    if (val3 == '' || val3 == null) alert('You need to add value in the input box');
    else {
        var posting = $.post(url, {
            im_core: 'selectAjaxUpdate',
            geo_level1: val1,
            geo_level2: val2,
            geo_level3: val3,
            pais: <? php echo $_POST['pais'] ?>
        }).done(function (data) {
            var obj = $.parseJSON(data);
            $.each(obj, function (key, value) {
                myArray.push({
                    text: obj[key].value,
                    value: obj[key].id
                });
            });
            //$(closeSelect).html('myArray');
            $(closeSelect).replaceOptions(myArray);

            //Set selectedValue over here
            $(closeSelect).val(yourSelectedValue);
        });
    }
});

Actually I am getting list of options from the Ajax and there I don't know which one has been selected , One thing That I can do is , when I am sending the value in ajax I can save it in a variable and use it later to match and prop it — Vikram Anand Bhushan, Jan 30 '15 at 11:43
yes. I did not find such variable in your code which was holding this value so I just put a placeholder yourSelectedValue there. You can replace it your vaule. — Sameer Azazi, Jan 30 '15 at 11:59
how about matching the new options with the string that I had passed in the Ajax to be added to the table, `$(closeSelect ,'option').filter(function() { return this.value.indexOf( val3 ) > -1; }) .prop('selected', true);` I tried this script but it wont work — Vikram Anand Bhushan, Jan 30 '15 at 12:02

how to make the new option that has been added to a select tag as selected in Jquery

2 Answers2