javascript, selected value in input box

Question

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?

Have you checked if $('#selectList :selected').text(); returns your selected value? And why are you mixing jquery and javascript when selecting elements? — Johannes Piontkowitz
– Johannes Piontkowitz, Commented Feb 21, 2018 at 12:45
You are aware that you are using jQuery? I only ask because you haven't tagged it in your question Also you haven't set an event listener if you are expecting the value of mytext to change when the client changes the option — NewToJS
– NewToJS, Commented Feb 21, 2018 at 12:45

Javed Shaikh · Accepted Answer · 2018-02-21 12:51:53Z

1

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>

answered Feb 21, 2018 at 12:51

Javed Shaikh

6817 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Renzo Calla · Accepted Answer · 2018-02-21 12:47:23Z

0

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

answered Feb 21, 2018 at 12:47

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

Comments

Pang · Accepted Answer · 2018-02-22 01:23:37Z

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

Collectives™ on Stack Overflow

javascript, selected value in input box

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related