CODEWITHSUNDEEP
phpjavascript
xing
xing

Reputation: 2453

how to change input box into select on clicking

I have an input box that contains value 'male'. How can i change that input box into select that will contain two options 'male' and 'female' onclick. Any help would be appreciated

<?php

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

?>

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

<script type="text/javascript" > 

 function changeSelect(){


}


</script>

Upvotes: 1

Views: 3359

Answers (4)

silly
silly

Reputation: 7887

without jquery try this:

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

with jquery try this

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

or with jquery and 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>

Upvotes: 2

Ramya
Ramya

Reputation: 1354

Your requirement is weird. How ever the below are the few approaches

Changing the element text box to Select box means you totally changing the element and you can not convert input element to select element

The easiest approach is implementing the select box instead of text box.

The another approach is on change of the text box create new select box append to div and remove input control

The another approach is implementation of DataList which helps you with out any coding. Code is below

echo '<input list="gender">

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

Upvotes: 1

Sibu
Sibu

Reputation: 4617

<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

Upvotes: 0

Minko Gechev
Minko Gechev

Reputation: 25682

Here is an example with 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();
});​

Upvotes: 1

Related Questions