CODEWITHSUNDEEP
javascriptjquery
Adrian
Adrian

Reputation: 523

Select not displaying correct selected value after update

This is my select in html:

<select id="bgPosition">
    <option value="left top" selected="selected">Left Top</option>
    <option value="center top">Center Top</option>
    ..
</select>

On page load I need to update the selected value with another one, so I tried with .each .prop and this:

function setActiveOption(el,val){   
    $(el).find('option:selected').removeAttr('selected');
    $(el).find('option[value="'+val+'"]').attr('selected','selected');
    console.log('selected: '+$('#bgPosition').val())
}

All ok for other select boxes, but not for #bgPosition I think because values contains spaces.

selected attribute is in right place, but is displaying first option as selected

Any idea how can this be fixed?

I also tried with different jQuery libraries

UPDATE: This is my fiddle and how I am running functions.

Upvotes: 1

Views: 1067

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337550

Given your example fiddle, the only select element that doesn't respect the value you set is the middle one, #bgRepeat, and that's because by default you've got two option set with the selected attribute.

To fix the problem, only provide one option with the selected attribute.

That being said, a better solution would be to just use .val() as a setter on the select itself, which is a one-liner and therefore renders the setActiveOption() function redundant. Try this:

var template = [{
  "mainBgImgPosition": "right bottom",
  "mainBgImgRepeat": "no-repeat",
  "mainBgImgSize": "cover"
}]

jQuery(function($) {
  var Builder = {
    initialized: false,
    initialize: function() {
      if (this.initialized)
        return;

      this.initialized = true;
      $('#bgPosition').val(template[0].mainBgImgPosition);
      $('#bgRepeat').val(template[0].mainBgImgRepeat);
      $('#bgSize').val(template[0].mainBgImgSize);
    }
  }
  Builder.initialize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bgPosition" id="bgPosition">
  <option value="left top" selected="selected">Left Top</option>
  <option value="left center">Left Center</option>
  <option value="left bottom">Left Bottom</option>
  <option value="center top">Center Top</option>
  <option value="center center">Center Center</option>
  <option value="center bottom">Center Bottom</option>
  <option value="right top">Right Top</option>
  <option value="right center">Right Center</option>
  <option value="right bottom">Right Bottom</option>
</select>
<select name="bgRepeat" id="bgRepeat">
  <option value="repeat" selected="selected">Repeat All</option>
  <option value="repeat-x">Repeat X</option>
  <option value="repeat-y">Repeat Y</option>
  <option value="no-repeat">No Repeat</option>
</select>
<select name="bgSize" id="bgSize">
  <option value="auto" selected="selected">Auto</option>
  <option value="cover">Cover</option>
</select>

Upvotes: 1

Youmy001
Youmy001

Reputation: 525

I don't know how you call your function but it seemed to work fine when I run it in JSFiddle. You need to call your function with the id of the element as the first parameter and the FULL value of the option as the second parameter as HTML does not concider words as seperate values.

setActiveOption('#bgPosition', 'center'); // Does not work
setActiveOption('#bgPosition', 'center top'); // Works fine

https://jsfiddle.net/Youmy001/uyun2soo

Upvotes: 0

lhavCoder
lhavCoder

Reputation: 961

i tried your code in a fiddle and it worked for me.

https://jsfiddle.net/b8t1yavu/

What are you passing into the function setActiveOption for el. It might now be working because of that. You could call the function in two ways.

setActiveOption('#bgPosition','center top')

OR

setActiveOption(bgPosition,'center top')

If you want it call it with the second method, you have to modify your code a bit. here is a fiddle for that https://jsfiddle.net/b8t1yavu/1/

Upvotes: 0

Related Questions