Show select drop down with a / in the result from the DB

[mrmbarnes]

Hi All

I hope someone can help me… I am storing time zones in my DB as something like Australia/Brisbane.

I have an Ajax call that runs some SQL that outputs this:

$output["data"] = $select;
echo json_encode($output);

The column in the DB is timeZone.

Everything else works except for the pre-select for the time zone drop down.

The select code is:

var state = result.data.timeZone.split("/")[1];
$('#timeZone option:selected').removeAttr('selected');
$('#timeZone option[value='+state +']').attr('selected','selected');

And my select sample is:

<select id="timeZone" name="timeZone" class="form-control" required>
   <option value="">Select User Time Zone...</option>
  <option value="Australia/Brisbane">QLD (Brisbane)</option>
  <option value="Australia/Sydney">NSW (Sydney)</option>
</select>

I was using just the time zone and not the country as well… example… Brisbane instead of Australia/Brisbane… and the below code:

$('#timeZone option:selected').removeAttr('selected');
$('#timeZone option[value='+result.data.timeZone +']').attr('selected','selected');

And the select worked fine.

I think the issue is adding the /

Can anyone help fix this so it works?

mrmbarnes

[mawburn]

@mrmbarnes

var state = result.data.timeZone.split("/")[1]; 
$('#timeZone option:selected').removeAttr('selected'); 
$('#timeZone option[value='+state +']').attr('selected','selected');

If I’m following you right, just remove the split.

[Mittineague]

For me at quick read the first likely looking culprit was that the input value needed to be encoded (similar to how “&” can sometimes raise a ruckus)

[mrmbarnes]

Thanks… I am not great at this yet… I am still learning… can you please give me an example of what you mean

[Mittineague]

The ampersand character is used in entities eg. &

The w3c validator has long had a pet peeve, if that’s possible, about URLs like:
site.com/somepage.php?var=val&foo=bar

I was wondering if you might need something like
Country%2FCity for the option values.

[mrmbarnes]

I fixed this with some minor changes.

I used the original code:

$(‘#timeZone option:selected’).removeAttr(‘selected’);
$(‘#timeZone option[value=’+result.data.timeZone +‘]’).attr(‘selected’,‘selected’);

but changed value= to id=

$(‘#timeZone option:selected’).removeAttr(‘selected’);
$(‘#timeZone option[id=’+result.data.timeZone +‘]’).attr(‘selected’,‘selected’);

I added code to the ajax call:

$doChunks = explode(“/”, $select[“timeZone”]);
$first = $doChunks[0];
$select[“timeZone”] = $doChunks[1];

And added an id to the drop down… such as:

<option value="Australia/Brisbane" id="Brisbane">QLD (Brisbane)</option>
<option value="Australia/Sydney" id="Sydney">NSW (Sydney)</option>

And now it works.