javascript - 在选择元素中查找选项并选择它

Question

我确定，我的问题很大程度上与语法相关。

我有一个页面，上面有标签(按钮)。用户应该能够单击这些标签之一来编辑其名称。

还在同一页面上，我有一个选择列表，在其中跟踪所有更改。当我单击标签按钮时，出现了我的问题，并且应该动态选择列表中的相应选项。我尝试了几件事，这是我最新的尝试:

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);
     }

我现在关心的代码部分是“在列表中找到相应的选项，然后选择它”。我似乎根本无法让它选择该选项。

如有任何帮助，我们将不胜感激。

Answer 1

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

JSFiddle