Javascript onchange 函数不适用于 PHP答案

【问题标题】：Javascript onchange function does not work with PHPJavascript onchange 函数不适用于 PHP
【发布时间】：2017-12-15 14:04:40
【问题描述】：

我写了一些代码，它使用 PHP 生成一个表单。我想使用 javascript（第 57 行）进行更多更改 - 通过从下拉菜单中选择一些内容（第 127 行）：

如果我选择值“范围”，我想在表单中再生成两个输入，就在该行的旁边。

This is how I want it to look like

// Javascript
$(function() {
    $("#select1").on("change",function() {
        var value = this.value;
        document.getElementById('a').innerHTML = value;
    });
});   

// HTML
<select onchange="select(this.value)" id="select1" name="type$i" size="1">
    <option value="max">Maximum the best</option>
    <option value="min">Minimum the best</option>
    <option value="range">Range</option>
</select>

【问题讨论】：

(57 line) 和 (127 line) 是什么意思..？
听起来不太复杂，测试if(this.value==="range") displayTheTwoInputs()之类的吧

标签： javascript php jquery select onchange

【解决方案1】：

如果我理解得很好，这可能是一种方法。希望对您有所帮助！

$(function() {
          $("#select1").on("change",function() {
            var value = $(this).val();
            if (value == "range") {
              $("#select2, #select3").show();
            } else {
              $("#select2 , #select3").hide();   
            }
            
          });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1" name="type1" size="1">
    <option value="max">Maximum the best</option>
    <option value="min">Minimum the best</option>
    <option value="range">Range</option>
</select>

<select id="select2" name="type2" size="1" style="display:none;">
    <option value="max">Maximum the best</option>
    <option value="min">Minimum the best</option>
    <option value="range">Range</option>
</select>
<select id="select3" name="type3" size="1" style="display:none;">
    <option value="max">Maximum the best</option>
    <option value="min">Minimum the best</option>
    <option value="range">Range</option>
</select>

【讨论】：

【解决方案2】：

像这样的简单示例可能会对您有所帮助。如果没有完整的 HTML，我们无法提供更好的示例。

function select(value) {
  if (value == "range") {
    $('<input>').attr({
      type: 'text',
      id: 'foo1',
      name: 'bar1'
    }).appendTo('form');
    $('<input>').attr({
      type: 'text',
      id: 'foo2',
      name: 'bar2'
    }).appendTo('form');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select onchange="select(this.value)" id="select1" name="type$i" size="1">
    <option value="max">Maximum the best</option>
    <option value="min">Minimum the best</option>
    <option value="range">Range</option>
</select>
</form>

【讨论】：