在選擇元素中找到一個選項並選擇它

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