单击下拉列表，创建一个表单

Question

enter image description here This error message keeps opening on console. And I am using Ember.js

I am trying to make a drop-down and whenever on option from a drop-down is clicked, a form should be made based on what an option is chosen. For example, there are 3 options on dropdown: name, text, drop-down. When a user click a text, a text form should be created below. I already made an dropdown and tried to implement by writing document.write(" < /h1>"), but it keeps saying uncaught syntax error. Can someone help me please?

<script type="text/javascript">
    function clicking(option) {
        if (option === "name")
            //document.write("<h1>Hello<h1>");
    }
</script>

<h1>Data Form Test</h1>
<div id="dropdown">
    <form>
        <select id="selectBox" onchange="clicking(this)">
            <option value="" disabled="disabled" selected="selected" style="display:none">Please select a option</option>
            <option value="name">Name</option>
            <option value="title">Title</option>
            <option value="text">Text</option>
            <option value="check-box">Check-box</option>
            <option value="drop-down">Drop-down</option>
            <option value="calendar">Calendar</option>
        </select>
    </form>
</div>

<div id="div1"></div>

Answer 1

<script type="text/javascript">
    function clicking(option) {
        if (option == "name"){
            //document.write("<h1>Hello<h1>");
        }
    }
</script>

and on html

onchange="clicking(this.value)"

Answer 2

You can't access your selected value via option , you need to use property value instead. In my example I changed option with event .

To write some HTML/text into div/selector use .innerHTML method instead of document.write .

See working example.

  function clicking(event) { if (event.value === "name") document.getElementById('div1').innerHTML = "<h1>Hello<h1>"; } 

 <h1>Data Form Test</h1> <div id="dropdown"> <form> <select id="selectBox" onchange="clicking(this)"> <option value="" disabled="disabled" selected="selected" style="display:none">Please select a option</option> <option value="name">Name</option> <option value="title">Title</option> <option value="text">Text</option> <option value="check-box">Check-box</option> <option value="drop-down">Drop-down</option> <option value="calendar">Calendar</option> </select> </form> </div> <div id="div1"></div> 

If you would like to use your form to perform for example an ajax request. Here is another example I created for you.

I used addEventListener to show to different approach of handling your clicking function.

Read my comments.

 // Our selectors var form = document.getElementById('example-form'); var select = document.getElementById('selectBox'); var result = document.getElementById('result'); // Let's add an event listener to our form, we will listen whenever we submit the form form.addEventListener('submit', function(e) { var elements = this.querySelectorAll('input, select'); var formData = {}; for(i = 0; i < elements.length; i++) { var element = elements[i]; Object.assign(formData, { [element.name] : element.value }) } console.log(formData); // Now you can perform some ajax call eg. // I've commented it out, but code works, you just need to replace url //$.ajax({ // url: 'http://example.com/action/url/', // type: 'post', // data: formData, // our form data // success: function(response) { // result.innerHTML = response; // } //}) // Prevent Page from autoreloading e.preventDefault(); return false; }); // Another approach of handling your clicking function is by passing eventListener to select select.addEventListener('change', function(e) { // Log //console.log(e.target.value); // We can use switch here for example // Code becomes more readable switch (e.target.value) { case 'name': case 'title': case 'text': result.innerHTML = '<h1>Hello ' + e.target.value + '</h1>'; default: break; } }); 

  <form id="example-form"> <select id="selectBox" name="selectBox"> <option value="" disabled="disabled" selected="selected" style="display:none">Please select a option</option> <option value="name">Name</option> <option value="title">Title</option> <option value="text">Text</option> <option value="check-box">Check-box</option> <option value="drop-down">Drop-down</option> <option value="calendar">Calendar</option> </select> <input name="example1" value="" placeholder="example input 1" /> <input name="example2" value="" placeholder="example input 2" /> <button type="submit">Submit me</button> </form> <div id="result"></div>