如何制作将文本​​放置在文本字段中的下拉菜单

Question

How do i make a drop down menu that when an option is chosen it creates a text that is placed in a text box. For Example, Dropdown menu option1 = "are good"

i want the output to be, "Waffles Are Good". Waffles Will Automatically be there and they select an option from the drop down menu and it places the text "Are Good" Onto A Text Field

Answer 1

<p>Waffles <span id="whatarewaffles"></span></p>
<p>
    <label>What's with the waffles? 
        <select id="wafflemachine">
            <option value="are good">they are good</option>
            <option value="are delicious">they are delicious</option>
        </select>
    </label>
</p>

<script>
document.getElementById("wafflemachine").onchange = function() {
    document.getElementById("whatarewaffles").innerHTML = this.options[this.selectedIndex].value;
};
</script>

You mean something like this?

Answer 2

As per my understanding I made this fiddle . Let me know is it helpful for you.

HTML

<select id="data1">
  <option value="good">good</option>
  <option value="too good">too good</option>
  </select>
<input type="text" id="data2" value="Waffles good"/>

Jquery

$("#data1").val("good").change(function(){
var k=($("#data1").find(":selected").text());
    $("#data2").val('Waffles'+k);

});

Answer 3

In javascript you can use jquery to do this.

You can check my full code here https://jsfiddle.net/tmhnfL9d/

 $('#selectme').change(function(){ $("#sentence").html('Waffles'); answer = $(this).val(); $("#sentence").append(answer); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectme"> <option value= "">Please Select</option> <option value= " are Good">are Good</option> <option value= " are Bad">are Bad</option> </select> <p id="sentence">Waffles</p>