1

値「男性」を含む入力ボックスがあります。その入力ボックスを、「男性」と「女性」の 2 つのオプション onclick を含む選択に変更するにはどうすればよいですか。どんな助けでもいただければ幸いです

<?php

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

?>

htmlページ------------------------

<script type="text/javascript" > 

 function changeSelect(){


}


</script>
4

4 に答える 4

2

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>
于 2012-11-22T09:19:00.673 に答える
1

あなたの要件は奇妙です。ただし、以下はいくつかのアプローチです

要素のテキストボックスを選択ボックスに変更すると、要素が完全に変更され、入力要素を選択要素に変換できなくなります。

最も簡単なアプローチは、テキストボックスの代わりに選択ボックスを実装することです。

別のアプローチは、テキストボックスを変更して、divに追加する新しい選択ボックスを作成し、入力コントロールを削除することです。

もう1つのアプローチは、コーディングなしで役立つDataListの実装です。コードは以下のとおりです

echo '<input list="gender">

<datalist id="gender">
  <option value="Male">
  <option value="Female">
</datalist>';
于 2012-11-22T09:19:19.497 に答える
1

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();
});​
于 2012-11-22T09:07:50.140 に答える
0 
<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>​

デモ

于 2012-11-22T09:10:14.227 に答える