你可以使用jQuery來動態改變輸入字段的類型嗎？

-2

我試圖重構一些PHP/HTML代碼。我有一個充滿各種行的表格......每一行都有幾列，包括圖像圖標。

我想寫一些邏輯，這樣，當有人點擊這個圖像，系統做兩兩件事：

到位標籤的創建一個下拉列表。
從頁面上現有的下拉列表中獲取此下拉列表的值/列表。（稱爲「location_id」）。

HTML代碼

<tr> 
    <td id="21581"> 
     <img src="?module=chrome&amp;uri=pix/tango-user-trash-16x16-gray.png" title="1rack" height="16" width="16" border="0"> 
    </td> 
    <td id="location_name">location1</td> 
    <td>Location1-ABB-01</td> 
    <td><input tabindex="1" name="submit" class="edit" src="?module=chrome&amp;uri=pix/pencil-icon.png" id="21581" title="Edit row" type="image" border="0"></td> 
    <td><a href="index.php?page=row&amp;row_id=21586">Row Location1-ABB-01</a></td> 
    </tr>

所以特地我想更換有「LOCATION1」作爲一個下拉的值在網頁上的其他人的存在。並且由於將在列表中具有「location1」，我希望「located1」成爲選定值。

這是JavaScript代碼，我到目前爲止有：

JavaScript代碼

$(document).ready(function() { 
     $(".edit").click(function(){ 
       alert(this.id); 
       $("#location_id").clone().appendTo("#"+this.id); 
     }); 

});

問題

此代碼的工作在我結束了一個新的下拉列表在行中，但我不知道如何選擇/突出顯示值爲「21581」的下拉列表中的項目。或者，也可以使用「location_name」值匹配項目。
我現在面臨的挑戰是唯一確定正確的框以循環播放，因爲從clone（）命令創建的新文件與現有文件具有相同的名稱。

編輯1

下面的代碼是什麼樣子，現在（順便說一句，我不能改變我的jQuery的版本，因爲這是別人的代碼......所以我不能在「上使用「指令。）

$(document).ready(function() { 
     $(".edit").click(function(e){ 
       alert(this.id); 
       var menu = $("#location_id").clone(); 
       $(e.currentTarget).replaceWith(menu); 
       menu.find('option').each(function(i, opt) { 
       // when the value is found, set the 'selected' attribute 
         if($(opt).attr('value') == this.id) $(opt).attr('selected', 'selected'); 
       }); 
     }); 

});

第一條警報語句顯示正確 - 它顯示第一個td（例如21581）中的值。下拉菜單出現並替換圖像...但我需要它來代替location_name值。

來源

2015-10-19 dot

http://stackoverflow.com/questions/7895205/creating-dropdown -selectoption-elements-with-javascript，http://stackoverflow.com/questions/4814512/how-to-create-dropdown-list-dynamically-using-jquery – caramba

https://api.jquery.com/clone/ – DontVoteMeDown

@DontVoteMeDown酷。我不知道那件事。但是，這會將選擇添加到輸入，而不是將其替換正確嗎？我需要替換它 – dot

未經測試，但這個應該這樣做（基本上）根據您的編輯

$('input[name="submit"]').on('click', function(e) { 
     // create a new select menu 
     var menu = $(document.createElement('select')); 
     // replace the button that was clicked with the menu 
     $(e.currentTarget).replaceWith(menu); 
     // add each option from the select menu that contains your options to the newly created menu 
     $('select[name="options-target"]').find('option').each(function(i, opt) { 
      menu.append($(opt)); 
     }); 
});

，試試這個：

$('.edit').on('click', function(e) { 
     // make your clone 
     var menu = $("#location_id").clone(); 
     // empty the td element then append the menu 
     $("#location_name").empty().append(menu); 
     // loop through options looking for value 21581 
     menu.find('option').each(function(i, opt) { 
      // when the value is found, set the 'selected' attribute 
      if($(opt).attr('value') == '21581') $(opt).attr('selected', 'selected'); 
     }); 
    });

來源

2015-10-19 19:44:04 Jbird

輕微的錯誤'find（'option'）' – Steve

'replaceAll（menu）' – turbopipp

糟糕 - 感謝夥計們。編輯。 – Jbird

你可以使用jQuery來動態改變輸入字段的類型嗎？

回答

相關問題