Question

I have really put efforts in searching for possible answers here and on Google. I did find some answers but when I apply them to my code and my situation, it just doesn’t work.

I tried:

$("select#city option['City, ST']").attr('selected', 'selected');

I also tried:

$("select#city").val('City, ST');

as suggested somewhere.

I tried putting this code to a document.ready function – to no avail. I then tried placing it at the top (not in the head section though) with no document.ready but still the same.

What could be the reason for this function to fail? Is the moment when it’s called important (I mean, does it matter if my select box with values render first and then the function gets called? Or could it be something else?

HTML code:

<div class="ui-widget">
            <h3>Location</h3>
            <form id="chooseCity" class="" action="" method="post">
                <select id="city" name="city">

                    <option value="Select Town">Select Town</option>
                    <option value='Acworth, NH'>Acworth, NH</option>
                    <option value='Alstead, NH'>Alstead, NH</option>
                    <option value='Alton, NH'>Alton, NH</option>
                    <option value='Alton Bay, NH'>Alton Bay, NH</option>
                    <option value='Amherst, NH'>Amherst, NH</option>
                    <option value='Andover, NH'>Andover, NH</option>
                    <option value='Antrim, NH'>Antrim, NH</option>
                    <option value='Concord, NH'>Concord, NH</option>
                </select>
            </form>
        </div>

Could this loop be the culprit? Maybe it’s somehow interferring:

                <option value="Select Town">Select Town</option>
                    <?php foreach($arr as $city):
                        echo "<option value='{$city}'";
                        echo ($_POST['city-hp'] == $city) ? 'selected' : '';
                        echo ">".$city."</option>".PHP_EOL;
                    endforeach; ?>

IMPORTANT EDIT:

I’ve discovered that this piece of code:

$(function() {
    $( "#city" ).combobox();
    $( "#toggle" ).click(function() {
        $( "#city" ).toggle();
    });
});

is preventing my combobox to programmatically select desired value.
But this piece of code is crucial for styling the select box. I’ve downloaded the example from the jQuery UI website and integrated it into my website.

How can the above code be modified to retain its appearance while allowing for the desired functionality?

Answer 1

Your jQuery works – something else is interfering.

I would suggest poking through other plugins you may have installed to see if they’re overriding the selected index, probably just with the first <option> in the select.
Alternatively, if you want to elaborate on which technologies you’re using, someone might be able to help you further.

Edit:

See the answers on this related question – it looks like you will have to edit the plugin’s source.

Find this line in the combobox plugin:

.addClass("ui-widget ui-widget-content ui-corner-left");

and add this line immediately after it:

input.val( $(select).find("option:selected").text());

Source