We Keep Coding

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.

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>

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/

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

Select first option that is not empty

Does anyone know how to autoselect in a selectbox? I want to do is even though there is a blank option the selectbox will still show the option that has a value on it.
Does anyone know how to do it in jquery?
html code:
<select name="name">
<option></option>
<option>Mark</option>
</select>
<select name="age">
<option></option>
<option>16</option>
</select>

May this help you :
HTML:
<select name="name">
<option></option>
<option>Mark</option>
</select>
<select name="age" id='some'>
<option></option>
<option>16</option>
</select>
Jquery:
$($('#some').children()[1]).attr('selected',true)

If you have more than one empty option, and there is no order, this is the best solution I think: jsFiddle Live Demo
What we've done here is, checking every selectbox by a each loop:
$('select').each(function()
{
});
And then inside the loop we find the first option which is not empty:
$(this).find('option:not(:empty)').first()
And make it selected by prop:
$(this).find('option:not(:empty)').first().prop('selected',true);
So the whole jQuery and Html will be:
jQuery
$('select').each(function()
{
$(this).find('option:not(:empty)').first().prop('selected',true);
});
HTML
<select name="name">
<option></option>
<option>Mark</option>
</select>
<select name="age">
<option></option>
<option>16</option>
<option>20</option>
<option></option>
<option>55</option>
<option></option>
</select>

If you want to do this to all select boxes on the page, use this:
$(function () {
$('select').each(function () {
$(this).find('option').not(':empty()').first().attr('selected', true);
})
});
It grabs each select, finds the first option that is not empty (read: has text inside it) and sets the selected attribute.
See the fiddle.

No need for javascript to do this, if you want to select (Mark) for example, do it like this
<select name="name">
<option></option>
<option selected>Mark</option>
</select>
and in XHTML:
<select name="name">
<option></option>
<option selected="selected">Mark</option>
</select>

Add value to a drop down menu with a form

Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
Should I use an array? I been searching the net but couldn't find anything that would help.

Here is a JavaScript solution to add items to a drop down.
The HTML to use..
<form>
<select id="categories" name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>​​
JavaScript code...
var categories = document.getElementById("categories");
var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');
categories.appendChild(newOption);
​
jQuery code... (a lot shorter)
$("#categories").append("<option value='newvalue'>New Value</option>");
Here is the JavaScript JSFiddle and the jQuery JSFiddle to play with!

You could look into jQuery append() and option() with click event...
I've just created a working solution for you.
Don't know if this is what you was looking for, but this is how it works:
You simply just write the value and visual option name into a form text field: value, text which gives you this:
<option value="value">text</option>
<select id="mySelect"></select>
<p> </p>
<input type="text" id="string"><br>
<button id="append">Append</button>
$('#append').click(function(){
var str = $('#string').val();
var substr = str.split(', ');
$('#mySelect').append( new Option(substr[0],substr[1]));
});
Here is a working version: http://jsfiddle.net/SCf8m/1/

dropdown menu to create text field

I have spent about an hour or two trying to find out how to use JavaScript to create a text field when a certain value is selected from a drop down list.
Here is the code for the drop down menu if that's of any help. I'd have attempted to write the code to do this myself, but I am still very unfamiliar with how to write JavaScript code
<select name="claim">
<option value="">Select a Claim</option>
<option value="Insurance">Insurance</option> // this option I want when selected to create a text field
<option value="Warranty">Warranty</option>
</select>

try this hope it helps
<div id="area">
<select id="claim" name="claim">
<option value="">Select a Claim</option>
<option value="Insurance">Insurance</option>
<option value="Warranty">Warranty</option>
</select>
</div>
and script
$(document).ready(function(){
$("#claim").change(function(){
$("#area").find(".field").remove();
//or
$('#area').remove('.field');
if( $(this).val()=="Insurance")
{
$("#area").append("<input class='field' type='text' />");
}
});
});
example http://jsfiddle.net/cqjJy/

Focusing first combo box using JavaScript

I have combo boxes with same name and ID. I want to focus first combo box.
How can I do this?
document.getElementById('test').focus();
This is the javascript code I was given to set the focus on the combo box but nothing happens.
I have a combo box like:
<select name="test" id="test">
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="1.00">1.00</option>
</select>
<select name="test" id="test">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
In my page I have the combo boxes like this with same name and ID.
Now I want to set focus to the first combo box .How can I do this using JavaScript?

You can't have mulitple elements with the same id!
try this:
HTML:
<select name="first" id="first">
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="1.00">1.00</option>
</select>
<select name="second" id="second">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
JavaScript:
document.getElementById('first').focus();

move select focus on the top row of function, before call all elements. example
function myfunc()
{
document.getElementById('myselect').focus();
document..........
}