答案 0 :(得分：0)
首次点击后，您可以将字词应用到字段中。然后，只有当没有此类时，才可以将该下拉列表添加到该字段中。
$(".ufield").click(function() {
if (!$(this).hasClass('hasSelect') {
$(this).addClass('hasSelect');
$(this).append("<select><option value='TEST'>TEST</option>");
}
});
答案 1 :(得分：0)
您必须告诉您的元素停止收听点击事件。您可以使用unbind（http://api.jquery.com/unbind/）来完成此操作。您的JS代码将类似于：
$(".ufield").click(function() {
$(this).append("<select><option value='TEST'>TEST</option>");
$(this).unbind('click');
});
答案 2 :(得分：0)
您可以添加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> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
答案 3 :(得分：0)
我们需要一个函数来创建一个需要事件触发器的新<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
});
答案 4 :(得分：0)
我已经创建了一种方法，可以在不使用jQuery的情况下执行此操作，但是您也想要这个选项 - 我不认为在几行时包含整个库是值得的vanilla JS可以轻松处理这个问题;但您可能需要在项目中使用jQuery。
这是两个功能;其中一个调用窗口加载并分配选择选项。
第二个选项等待焦点清除选择菜单，并使用所选值的字符串填充辅助表的访问TD。你可以通过＆＃34; tabbing＆＃34;离开，或者点击屏幕上的其他位置，例如下一个字段，等等。
以下是工作示例：
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>