This usually works:
<select id="field-state">
<option value="colorado">Colorado</option>
<option value="idaho">Idaho</option>
</select>
$('#field-state').val('idaho')
or
$('#field-state option[value=idaho]').attr('selected','selected')
or
var state = 'idaho';
$('#field-state').find('option[value='+state
+']').attr('selected','selected');
could you provide a test page exhibiting your problem?
- ricardo
On Oct 23, 9:29 am, newkid85 <[EMAIL PROTECTED]> wrote:
> Thanks for the tip, ricardo.
>
> I've decided to initialise the dropdowns with the existing form values
> before triggering a click event, but I've run into another problem. I
> can't seem to set the selected option.
>
> I've tried the following with a hardcoded value for state without any
> luck.
>
> $('#field-state').val(state);
>
> $("#field-state").val(state).attr("selected","selected");
>
> $("#field-state [EMAIL PROTECTED]").attr("selected","selected");
>
> Yet the dropdowns always have the first item in the options selected.
>
> Interestingly, the following works if you need to set the dropdown to
> select the ' ' option.
>
> $('#field-state').val(' ');
>
> Any other value just won't keep though.
>
> Seems like this is a common problem based on some googling. Anyone
> else encountered this and found a workaround?
>
> On Oct 17, 7:10 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > You can do $("#field-state").unbind('change'); when it starts being
> > edited and bind the function again when it's done, or you can put
> > everything in the function inside an IF statement which depends on the
> > edit mode.
>
> > - ricardo
>
> > On Oct 17, 12:41 pm, newkid85 <[EMAIL PROTECTED]> wrote:
>
> > > I have a form with three dependent location select fields and a text
> > > field which lets a user add a new city if it is missing from the
> > > dropdown. The following function works fine when I create a new form.
> > > It puts the fields in sync to start with and keeps them that way when
> > > the user makes their selections.
>
> > > There is a problem though when the form is edited. This is because
> > > once the page loads the function below automatically puts the fields
> > > back in sync before the user does anything like on the initial
> > > creation. So the previously selected values are overwritten.
>
> > > When the form is being edited I would like to have thechangeevent
> > > only fire if the user actually changes any of the dropdowns
> > > themselves. I am able to check if the form is being edited or created
> > > but not sure how tochangemy function.
>
> > > function() {
> > > $("#update-button").hide();
> > > if ($("#field-city-text").val() == '') {
> > > $("#field-city-text-wrapper").hide();
> > > }
> > > $("#field-country").change(function () {
> > > var country = $(this).val();
> > > $("#field-city-wrapper").hide();
> > > $("#field-city").val('');
> > > updateState();
> > > })
> > > .change();
> > > $("#field-state").change(updateCity).change(addCity);
> > > $("#field-city").change(addCity);
>
> > > }
>
> > > Any thoughts appreciated.
