CODEWITHSUNDEEP
javascript
James
James

Reputation: 25

javascript, selected value in input box

I have a select dropdown and I want to make something that when the user chooses the value in the select dropdown, the selected text goes into an input box (which I can make hidden and can post).

I have this code so far:

<select name="klant" id="selectList" style="width: 250px">>
        <option value="0000">---Select Customer---</option>
        <?php echo $options;?>
</select>
<input type="text" id="mytext">

I have the following javascript to do the job but this does not work. Nothing gets inserted in the input box.

<script type="text/javascript">// <![CDATA[
$('#selectList').val();
$('#selectList :selected').text();
var foo = $('#selectList :selected').text();
document.getElementById("mytext").value = foo ;
// ]]&gt;
</script>

What am I doing wrong?

Upvotes: 0

Views: 530

Answers (3)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

You were missing a listener to the change of the select.

When code is just there, it will run at the start of the load.

I added .change event as it will run your code every time the select changes. I didn't change any of your code, I just inserted it in the listener.

You also have an extra > in your select. 

$('#selectList').change(function(){
$('#selectList').val();
$('#selectList :selected').text();
var foo = $('#selectList :selected').text();
document.getElementById("mytext").value = foo ;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="klant" id="selectList" style="width: 250px">
        <option value="0000">---Select Customer---</option>
        <option value="0001">---Select Customer1---</option>
        <option value="0002">---Select Customer2---</option>
</select>
<input type="text" id="mytext">

Upvotes: 0

Javed Shaikh
Javed Shaikh

Reputation: 681

You missed onChange event listner

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $( "#selectList" ).change(function() {

            $('#selectList').val();
            $('#selectList :selected').text();
            var foo = $('#selectList :selected').text();
            document.getElementById("mytext").value = foo ; 
        });

        })


</script>
</head>
<body>
    <h1>Hello, World!</h1>
    <select name="klant" id="selectList" style="width: 250px">
        <option value="0000">---Select Customer---</option>
        <option value="0001">asadad</option>
</select>
<input type="text" id="mytext">
</body>
</html>

Upvotes: 1

Renzo Calla
Renzo Calla

Reputation: 7716

You an use jquery onchange event.

$('#selectList').change(function(){
  $("#mytext").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="klant" id="selectList" style="width: 250px">>
        <option value="0000">---Select Customer---</option>
        <option value="0001">1</option>
        <option value="0002">2</option>
</select>
<input type="text" id="mytext">

Upvotes: 0

Related Questions