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

Answer 2

//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+"');
     }

Answer 3

我建议如下：

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

Answer 4


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

在select元素中查找选项并选择它

4 个答案: