Php 如何将输入框更改为单击选择

我有一个输入框，其中包含值“male”。如何更改输入框 选择包含两个选项的“男性”和“女性”onclick。任何帮助都将不胜感激

<?php

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

?>

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

<script type="text/javascript" > 

 function changeSelect(){


}


</script>

函数changeSelect（）{
}

以下是jQuery的一个示例：

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();
});​

$（'#textInput'）。单击（函数（）{
变量输入=$（此），
parent=input.parent（）；
$（'malefemale'）。插入后面（输入）；
input.remove（）；
});​

以下是jQuery的一个示例：

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();
});​

$（'#textInput'）。单击（函数（）{
变量输入=$（此），
parent=input.parent（）；
$（'malefemale'）。插入后面（输入）；
input.remove（）；
});​

函数changeSelect（）{
document.getElementById（“mydivid”）.innerHTML=“MaleFemale”；
}
​

函数changeSelect（）{
document.getElementById（“mydivid”）.innerHTML=“MaleFemale”；
}
​

---

如果没有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>

功能切换（me、其他）{
setAttribute（'style'，'display:none'）；
var otherElement=document.getElementById（其他）；
otherElement.removeAttribute（'style'）；
如果（otherElement.tagName.toLowerCase（）=='select'）{
myValue=me.getAttribute（'value'）；
对于（var n=0；n

使用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>

函数初始化切换（选择，输入）{
var s=jQuery（“#”+select）；
var i=jQuery（“#”+输入）；
i、 单击（函数（）{
i、 隐藏（）；
s、 show（）.val（i.val（））；
});
s、 更改（功能（）{
s、 隐藏（）；
i、 show（）.val（s.val（））；
});
}
男性的
女性的
外星人
jQuery（函数（）{
initToggle（“选择”、“输入”）；
});

或者使用jquery和dynamicly

<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>

函数初始化切换（输入、选项）{
var s=jQuery（“”）
.hide（）；
对于（var n=0；n

如果不使用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>

功能切换（me、其他）{
setAttribute（'style'，'display:none'）；
var otherElement=document.getElementById（其他）；
otherElement.removeAttribute（'style'）；
如果（otherElement.tagName.toLowerCase（）=='select'）{
myValue=me.getAttribute（'value'）；
对于（var n=0；n

使用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>

函数初始化切换（选择，输入）{
var s=jQuery（“#”+select）；
var i=jQuery（“#”+输入）；
i、 单击（函数（）{
i、 隐藏（）；
s、 show（）.val（i.val（））；
});
s、 更改（功能（）{
s、 隐藏（）；
i、 show（）.val（s.val（））；
});
}
男性的
女性的
外星人
jQuery（函数（）{
initToggle（“选择”、“输入”）；
});

或者使用jquery和dynamicly

<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>

函数初始化切换（输入、选项）{
var s=jQuery（“”）
.hide（）；
对于（var n=0；n

您的要求很奇怪。以下是为数不多的几种方法

将“元素”文本框更改为“选择框”意味着您完全更改了元素，并且无法将输入元素转换为“选择元素”

最简单的方法是实现选择框而不是文本框

另一种方法是更改文本框创建新的选择框附加到div并删除输入控件

另一种方法是实现DataList，它可以帮助您消除任何编码。代码如下

echo '<input list="gender">

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

echo'
';

您的要求很奇怪。以下是为数不多的几种方法

将“元素”文本框更改为“选择框”意味着您完全更改了元素，并且无法将输入元素转换为“选择元素”

最简单的方法是实现选择框而不是文本框

另一种方法是更改文本框创建新的选择框附加到div并删除输入控件

另一种方法是实现DataList，它可以帮助您消除任何编码。代码如下

echo '<input list="gender">

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

echo'
';

您将使用选择元素？？？？？？？？这是99.99%的用户所期望的。你为什么不直接使用选择框而不是输入框呢？我想你想要一种输入框的风格，但重点是选择框，对吗？你为什么要撕裂