thanks Walter... bottom line is that addOption works fine if called directly
but only clears the <select> if called from the Ajax.updater onSuccess...
even using static data!
This works:
<select id='county' name='county' onclick="addOption('city', 'New Boca','New
Boca')"></select><br/>
This doesn't (button is clicked (onclick="cities()">):
function cities()
{
if($F('zip').length == 5)
{
var options = {
method: 'get',
parameters: 'zip='+escape($F('zip')),
onSuccess: city_fill,
onFailure: ajax_fail,
on0: ajax_fail};
var myAjax = new Ajax.Updater('city', 'cities.php', options);
}
}
function city_fill(transport, json)
{
var szSelectID = 'city';
var json = transport.responseText.evalJSON(true);
// length = 7 for the zip I am testing with
for( var i=0; i<json.options.length; i++)
{
var szValue = json.options[i].value;
var szDisplay = json.options[i].text;
addOption('city', 'New York', 'New York');
}
}
On Tue, Jun 7, 2011 at 5:08 PM, Walter Davis <[email protected]> wrote:
> Your function is using add() to add an option to the end of the select, but
> I have never seen that work completely myself. Best to stick with the
> long-hand methods, they are at least known to work in most browsers:
>
> menu = $('mySelectList');
> menu.options[menu.options.length] = new Option('Label','value');
>
> Walter
>
>
> On Jun 7, 2011, at 4:09 PM, Phil Petree wrote:
>
> I've tried every option that I can find or figure out to add an <option>
>> to a <select> using prototype or dom.
>>
>> What I have figured out is that when prototype 1.6.x is present normal dom
>> functions dont SEEM work!
>>
>> ??? So how do you add an option to a select in prototype? ???
>>
>> I have:
>> var value = "New York"; // json.options[i].value
>> var display = "New York"; // json.options[i].text
>>
>> I have tried:
>>
>> $('city').options[i] = new Option(json.options[i].text,
>> json.options[i].value, null,(sel&&sel==json.options[i].value?true:false));
>> $('city').add = new Option(display, value);
>> addOption('city', value, display);
>> addOption('city', "New York", "New York");
>> select.insert(new Element('option', {value: value}).update('city'));
>> // and about a dozen other options
>> // this function works if called from the form with
>> onclick="addOption('city', 'New York', 'New York')">
>> // but if called from the onSuccess function and being passed the data (or
>> even hard coded) I get nothing!
>> function addOption(selectID, value, display)
>> {
>> var myselect = document.getElementById(selectID);
>> try
>> {
>> myselect.add(new Option(display, value), null); //add new option to end
>> of selectID
>> }
>> catch(e)
>> {
>> //in IE, try the below version instead of add()
>> myselect.add(new Option(display, value)); //add new option to end of
>> selectID
>> }
>> }
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, send email to
>> [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> For more options, visit this group at
>> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
