Question

我正在尝试更改我的表格的contentEditable div（在一个td中），让用户只选择2个可能的值。

我认为一个好的解决方案可能是将div（onfocus）更改为包含值的选项框。我用以下代码实现了这个目标：

    var linkText = "<select><option value=1>Usuari</option><option value=5>Administrador</option></select>";
    $(this).html(linkText);

我显示了选项框，但我无法从中选择其他值（它只显示第一个“Usuari”）。首先，我认为这是一个显示问题，但我通过css浮动该元素，没有任何事情发生。

我也尝试了另一种方式：

   var element2 = document.createElement("select");
   var option1 = document.createElement("option");
   option1.innerHTML = "Usuari";
   option1.value = "1";
   element2.add(option1, null);
   var option2 = document.createElement("option");
   option2.innerHTML = "Administrador";
   option2.value = "5";
   element2.add(option2, null);

但结果是一样的。我的最后一次尝试是将选项框更改为单选按钮，我在td中显示了两个选项，但我也无法选择第二个值。

我做错了什么？

谢谢！

Answer 1

<div id="select"></div>

$(document).ready(function(){
    $('<select />')
    .append($('<option />').val(1).text('User'))
    .append($('<option />').val(1).text('Admin'))
    .appendTo('#select');
});

http://jsfiddle.net/z18j6hm7/1/

Answer 2

我发现我的问题是什么：

我试图用选择框替换editableContent div中的内容：

    <div id="select3" style="width: 100%; height: 100%;" contenteditable="true">
         <select> 
            <option value="1">Usuari</option>
            <option value="5">Admin</option>
         </select>
    </div>

这样我得到了选择框，但没有＃34;可选择＆＃34;。

解决方案是首先将 contenteditable 更改为false。

    <div id="select3" style="width: 100%; height: 100%;" contenteditable="false">
         <select> 
            <option value="1">Usuari</option>
            <option value="5">Admin</option>
         </select>
    </div>

现在它很完美。

感谢以前的所有答案!!!

jQuery - 向表行添加一个选项框

2 个答案: