单击表中的TD单元格，然后插入 <select>框元素

Question

虽然我的下面代码似乎无济于事，但在第一次单击时将<select>元素插入<td>单元格（其类名是“ ufield”）中时，现在的问题是，当我单击并在其中进行选择时选择框，将在其旁边插入一个新的选择元素。

如果已经存在一个选择框，如何防止添加多个选择框？

我的第二个问题是，一旦在目标选择框中进行了选择，如何删除选择框并将其选项文本值保留在目标TD单元格中？

下面是问题的图片：

理想的结果是：

有问题的代码：

 window.onload = function() { $(".ufield").click(function() { $(this).append("<select><option value='TEST'>TEST</option>"); }); } 

 * { font-family: Arial; font-size: 9pt; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width: 100%"> <tr> <td>User ID:</td> <td>JSMITH</td> <td class="ufield" id="access">TEST</td> <td>Floor:</td> <td>12</td> </tr> <tr> <td>Account Status:</td> <td>active</td> <td>Office:</td> <td>D5656</td> </tr> <tr> <td>Last Login:</td> <td>30/08/2016 4:16 PM</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>Firstname:</td> <td>John</td> <td>Address:</td> <td>175 Yahoo Lane</td> </tr> <tr> <td>Lastname:</td> <td>Smith</td> <td>Province:</td> <td>Ontario</td> </tr> <tr> <td>Telephone:</td> <td>123-456-7891</td> <td>City:</td> <td>Niagra Falls</td> </tr> <tr> <td>Fax:</td> <td>613-990-1301</td> <td>Country:</td> <td>Canada</td> </tr> <tr> <td>E-mail:</td> <td>john_smith@yahoo.ca</td> <td>Postal Code:</td> <td>90210</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> 

Answer 1

首次单击该类后，您可以将其应用于您的字段。 然后，仅当下拉列表没有此类时，才可以将其添加到字段中。

$(".ufield").click(function() {
    if (!$(this).hasClass('hasSelect') {
      $(this).addClass('hasSelect');
      $(this).append("<select><option value='TEST'>TEST</option>");
    }
  });

Answer 2

您必须告诉您的元素停止监听点击事件。 您可以使用unbind（ http://api.jquery.com/unbind/ ）完成此操作。 您的JS代码如下所示：

 $(".ufield").click(function() {

    $(this).append("<select><option value='TEST'>TEST</option>");
    $(this).unbind('click');

});

Answer 3

您可以添加一个if语句来检查子元素中的select元素

$(document).on('click', '.ufield', function() {
  if($(this).find('select').length == 0) {
      $(this).empty();  //clears out current text in the table
      $(this).append("<select><option value='TEST'>TEST</option>");
  }
});

对于问题的第二部分，可以在用户将焦点移到select元素之外时添加事件。

$(document).on('focusout', '.ufield select', function(){
    var myValue = $(this).val();
    var $parent = $(this).parent();
    $(this).remove();
    $parent.append(myValue);
});

 $(document).on('click', '.ufield', function() { if($(this).find('select').length == 0) { $(this).empty(); //clears out the current value in the table cell $(this).append("<select><option value='TEST'>TEST</option>"); } }); $(document).on('focusout', '.ufield select', function(){ var myValue = $(this).val(); //gets the current value of the select box var $parent = $(this).parent(); //saves the parent element to append the value to later $(this).remove(); //removes the select element $parent.append(myValue); //appends the value to the table cell }); 

 * { font-family: Arial; font-size: 9pt; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width: 100%"> <tr> <td>User ID:</td> <td>JSMITH</td> <td class="ufield" id="access">TEST</td> <td>Floor:</td> <td>12</td> </tr> <tr> <td>Account Status:</td> <td>active</td> <td>Office:</td> <td>D5656</td> </tr> <tr> <td>Last Login:</td> <td>30/08/2016 4:16 PM</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>Firstname:</td> <td>John</td> <td>Address:</td> <td>175 Yahoo Lane</td> </tr> <tr> <td>Lastname:</td> <td>Smith</td> <td>Province:</td> <td>Ontario</td> </tr> <tr> <td>Telephone:</td> <td>123-456-7891</td> <td>City:</td> <td>Niagra Falls</td> </tr> <tr> <td>Fax:</td> <td>613-990-1301</td> <td>Country:</td> <td>Canada</td> </tr> <tr> <td>E-mail:</td> <td>john_smith@yahoo.ca</td> <td>Postal Code:</td> <td>90210</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> 

Answer 4

我们需要一个函数来创建一个新的<select> ，每次需要事件触发
这里是

 function NewSelectBox() { var select = document.createElement('select'); var values = ['foo', 'bar', 'foo2']; for (var i = 0; i < values.length; i++) { var new_opt = document.createElement('option'); new_opt.setAttribute('value', values[i]); new_opt.innerHTML = values[i]; select.appendChild(new_opt); } //add the event we need $(select).on('change',function(){ var $parent = $(this).parent(); var value = $(this).val(); $(this).remove(); $parent.text(value); }); return select; } 

仅用于插入<select>如果没有...

 $('.ufield').on('click',function () { $(this).unbind('click'); // this will unbind click event only for this element (not all '.ufield's select. $(this).append( NewSelectBox() );//prepared before }); 

Answer 5

如果您也想使用该选项，我已经创建了一种无需使用jQuery的方法-当几行普通JS可以轻松处理此问题时，我认为不值得将整个库包含在内； 但是您可能需要在项目上使用jQuery。

这是两个功能； 其中之一调用窗口加载并分配选择选项。

第二个选项等待焦点从选择菜单中清除，然后使用所选值的字符串填充辅助表的访问TD。 您可以通过“跳格”或单击屏幕上的其他位置（例如下一个字段）来实现此目的。

这是工作示例：

 var input = document.getElementById('input') var output = document.getElementById('output') window.onload = addSelections(); function addSelections(){ var inputString = input.innerHTML = "<select id='selectedInput' ><option value='TEST 1'>TEST 1</option><option value='TEST 2'>TEST 2</option><option value='TEST 3'>TEST 3</option></select>" var inputListener = document.getElementById("selectedInput"); inputListener.addEventListener("blur", dumpSelections); } function dumpSelections() { var selectedInput = document.getElementById('selectedInput') var outputString = selectedInput.options[selectedInput.selectedIndex].text; output.innerHTML = outputString; } 

 <h2>Input Table</h2> <table> <tr> <th>Name</th> <th>Access</th> </tr> <tr> <td>John</td> <td id="input" >TEST</td> <td> </tr> </table> <h2>Output Table</h2> <table> <tr> <th>Name</th> <th>Access</th> </tr> <tr> <td>John</td> <td id="output" ></td> </tr> </table>