Вы можете использовать jquery для динамического изменения типа поля ввода?

Question

Справочная информация

Я пытаюсь реорганизовать некоторый код php/html. У меня есть таблица, заполненная различными строками ... каждая строка имеет несколько столбцов, включая значок изображения.

Я хотел бы написать некоторую логику, так что, когда кто-то нажимает на этом изображении, система делает две вещи:

1. создает выпадающий список вместо тега.
2. получает значения/список для этого выпадающего списка из существующего выпадающего списка. (Вызывается «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» в списке, я хочу, чтобы «found1» был выбранным значением.

Это Java-код, который я до сих пор:

Javascript Код

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

}); 

Вопрос

Этот код работает в том, что я в конечном итоге с нового выпадающего списка в строке, но я не уверен, как выбрать/выделить элемент в выпадающем списке со значением «21581». Или, альтернативно, я мог бы сопоставить элемент, используя значение «location_name».
Задача, которую я имею прямо сейчас, однозначно идентифицирует правильный прямоугольник для прокрутки, потому что новое, созданное командой clone(), имеет то же имя, что и существующее.

EDIT 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.

Answer 1

Не тестировался, но это должно сделать это (в основном)

$('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'); 
     }); 
    });