Question

enter image description here 此错误消息在控制台上保持打开状态我正在使用Ember.js

我正在尝试制作一个下拉列表，只要点击下拉列表中的选项，就应该根据选择的选项制作表单。例如，下拉列表中有3个选项：名称，文本，下拉列表。当用户单击文本时，应在下面创建文本表单。我已经做了一个下拉列表并尝试通过编写document.write（“＆lt; / h1＆gt;”）来实现，但它一直在说未捕获的语法错误。有人能帮帮我吗？

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

和html

onchange="clicking(this.value)"

Answer 2

您无法通过option访问所选值，而是需要使用属性value。在我的示例中，我使用option更改了event。

使用.innerHTML方法而不是document.write将一些HTML /文本写入div / selector。

参见工作示例。

    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>

如果您想使用form来执行ajax请求。这是我为你创建的另一个例子。

我使用addEventListener来展示处理clicking函数的不同方法。

阅读我的评论。

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

点击下拉菜单，创建一个表单

2 个答案: