CODEWITHSUNDEEP
javascriptjqueryhtml
wribit
wribit

Reputation: 605

Finding an option in a select element, and selecting it

My problem is pretty much syntax related, I'm sure.

I have a page, on which there are tags (buttons). The user should be able to click on one of those tags to edit it's name.

Also on that same page, I have a select list in which I keep track of all the changes. My problem arises when I click the tag button, and the corresponding option in the list should be selected dynamically. I tried several things, here's my latest attempt:

HTML

       <!-- tags container -->
        <div class="container_12">
            <div class="grid_2"><img src="images/spacer.png" /></div>
            <div id="content" class="grid_8">
                <button name="PHP" class="tag-button" onclick="edit(this)">PHP</button>
            </div>
            <div class="grid_2"><img src="images/spacer.png" /></div>
        </div>
        <!-- tags container end -->

        <!-- action buttons container -->
        <div class="container_12 action-bar">
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <div id="action-add">
                <input type="text" name="newTag" id="newTag" />
                <input type="button" id="add" value="Add tag" />
            </div>
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <div id="action-edit">
                <input type="text" name="editTag" id="editTag" />
                <input type="button" id="update" value="Update tag" />
            </div>
         <!-- action buttons container end -->
        </div>

        <!-- Real Time list container -->
        <div class="container_12">
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <select id="insertString" multiple>
                <option value="0">PHP</option>
            </select>
        </div>
        <!-- real time list container end -->

Javascript/jquery:

    //function edit: places the tag button info in textbox
    function edit(element)
    {
            var name = $(element).attr('name');
            //add the tag name to the editTag textbox
            $('#editTag').val(name);
            //find in the list the corresponding option, and select it
            $('#insertString').find('option: contains("' + name + '")').attr("selected", true);
     }

The portion of code I'm concerned with right now, is the "find in the list the corresponding option, and select it." I can't seem to make it select the option at all.

Any help would be appreciated.

Upvotes: 1

Views: 85

Answers (4)

Triode
Triode

Reputation: 11357

var previous = "Gateway 1", edited = "world";
$('#insertString option:contains("' + previous +'")').text(edited);
$('#insertString option:contains("'+ edited + '")').attr('selected', true);

JSFiddle

Upvotes: 1

Anonymous
Anonymous

Reputation: 1

I suggest the following:

$('#insertString').find('option:contains("'+ name + '")').attr("selected", true);

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181


$("#insertString option[value='" + name "']").prop('selected', true);

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

//function edit: places the tag button info in textbox
    function edit(element)
    {
            var name = $(element).attr('name');
            //add the tag name to the editTag textbox
            $('#editTag').val(name);
            //find in the list the corresponding option, and select it
            $('#insertString').val('"+name+"');
     }

Upvotes: 0

Related Questions