使用選擇內容可編輯元素？

Question

是否可以帶一個contenteditable屬性的選擇菜單？

以下：

<select name="letter"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

Answer 1

首先，你需要能夠根據選擇的元素是否它具有contenteditable：一旦CONTENTEDITABLE啓用

<p contenteditable="true" name="letter">a</p> 

將成爲一個選擇選項屬性：

$('[contenteditable="true"]') 

例如，

HTML：

<div> 
    <p contenteditable='true'>ajdsflkjasdlfkjasdlfjdklasfD</p> 
</div> 
<div> 
    <p contenteditable='true'>oqewrujfzkljvladswjoaiewnlei</p> 
</div> 
<div> 
    <p contenteditable='true'>2345rtsdghwregg342534tres34</p> 
</div> 
<div> 
    <p contenteditable='true'>a234trey36y34ttgfttqerertuityt</p> 
</div> 
<div> 
    <p contenteditable='true'>1234rgdfs563ju6tref43f5eyrew65htew</p> 
</div> 

的JavaScript：

$(function() { 
    $('[contenteditable="true"]').each(function() { 
     var parent = $(this).parent(), 
      text = $(this).text(), 
      select = function() { 
       var returnstring = ''; 
       for (var i in text) { 
        returnstring += "<option value='" + text[i] + "'>" + text[i] + "</option>"; 
       } 
       return "<select>" + returnstring + "</select>"; 
      }(); 
     $(this).empty(); 
     parent.append(select); 
    }); 
}); 

這裏是一個鏈接到fiddle所以你可以看到我在說什麼。