如何將輸入框更改爲點擊選擇

Question

我有一個包含值'male'的輸入框。我如何將輸入框 更改爲select，其中包含兩個選項「男性」和「女性」onclick。任何幫助，將不勝感激

<?php 

echo '<input type="text" name="gender" id="gender" value="male" onclick="changeSelect();"/>'; 

?> 

htmlPage ------------------------

<script type="text/javascript" > 

function changeSelect(){ 


} 


</script> 

Answer 1

<div id="mydivid"><input type='text' onclick='changeSelect()' value='Men' /></div> 

<script> 
function changeSelect() { 
    document.getElementById("mydivid").innerHTML = "<select name='gender'><option value='male'>Male</option><option value='female'>Female</option></select>"; 
    } 
    </script>​ 

Demo

Answer 2

下面是用jQuery的例子：http://jsfiddle.net/mJ7s6/1/

的JavaScript

$('#textInput').click(function() { 
    var input = $(this), 
     parent = input.parent(); 
    $('<select><option value="male">male</option><option value="female">female</option>').insertAfter(input); 
    input.remove(); 
});​ 

Answer 3

沒有的jQuery試試這個：

<script type="text/javascript"> 
function toggle(me, other) { 
    me.setAttribute('style', 'display: none'); 
    var otherElement = document.getElementById(other); 
    otherElement.removeAttribute('style'); 

    if(otherElement.tagName.toLowerCase() === 'select') { 
     myValue = me.getAttribute('value'); 
     for(var n = 0; n < otherElement.options.length; n++) { 
      if(otherElement.options[n].getAttribute('value') == myValue) { 
       otherElement.options[n].select; 
       break; 
      } 
     } 
    } 
    else { 
     myValue = me.options[me.options.selectedIndex].getAttribute('value'); 
     otherElement.value = myValue; 
    } 
} 
</script> 

<input onclick="toggle(this, 'the_select');" id="the_input" /> 
<select onchange="toggle(this, 'the_input');" id="the_select" style="display:none"> 
    <option value="male">male</option> 
    <option value="female">female</option> 
    <option value="alien">alien</option> 
</select> 

與jQuery試試這個

<script type="text/javascript"> 

function initToggle(select, input) { 
    var s = jQuery('#' + select); 
    var i = jQuery('#' + input); 
    i.click(function(){ 
     i.hide(); 
     s.show().val(i.val()); 
    }); 
    s.change(function(){ 
     s.hide(); 
     i.show().val(s.val()); 
    }); 

} 

</script> 

<input id="the_input" /> 
<select id="the_select" style="display:none"> 
    <option value="male">male</option> 
    <option value="female">female</option> 
    <option value="alien">alien</option> 
</select> 
<script type="text/javascript"> 
    jQuery(function(){ 
     initToggle('the_select', 'the_input'); 
    }); 
</script> 

或jQuery和動態地

<script type="text/javascript"> 

function initToggle(input, options) { 
    var s = jQuery('<select />') 
     .hide(); 
    for(var n = 0; n < options.length; n++) { 
     s.append(jQuery('<option/>') 
      .attr('option', options[n]) 
      .html(options[n])); 
    } 
    var i = jQuery('#' + input).after(s); 
    var conf = function(a, b, method) { 
     a.unbind(method).bind(method, function(){ 
      a.hide(); 
      b.show().val(a.val()); 
     }); 

    } 
    conf(i, s, 'click'); 
    conf(s, i, 'change');  
} 

</script> 

<input id="the_input" /> 
<script type="text/javascript"> 
    jQuery(function(){ 
     initToggle('the_input', ['male', 'female', 'alien']); 
    }); 
</script> 

Answer 4

你的要求是怪異。如何過下面是幾種方法

改變元素文本框來選擇框中意味着你完全改變元素，你不能轉換輸入元素選擇元素

最簡單的方法是實施選擇框，而不是文本框。

的另一種方法是在文本框的變化創造新的選擇框，追加到股利和刪除輸入控制

的另一種方法是實現DataList控件的它可以幫助您與任何編碼。代碼如下

echo '<input list="gender"> 

<datalist id="gender"> 
    <option value="Male"> 
    <option value="Female"> 
</datalist>';