Javascript onchange 函数不适用于 PHP
Javascript onchange function does not work with PHP
我写了一些代码,它使用 PHP 生成了一个表单。我想使用 javascript(第 57 行)进行更多更改 - 通过从下拉菜单(第 127 行)中选择一些内容:
如果我select值"range",我想在表单中再生成两个输入,
就在该行的旁边。
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>
如果我理解得很好,这可能是一种方法。希望对您有所帮助!
$(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>
像这样的简单示例可能会对您有所帮助。没有完整的 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>
我写了一些代码,它使用 PHP 生成了一个表单。我想使用 javascript(第 57 行)进行更多更改 - 通过从下拉菜单(第 127 行)中选择一些内容:
如果我select值"range",我想在表单中再生成两个输入, 就在该行的旁边。
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>
如果我理解得很好,这可能是一种方法。希望对您有所帮助!
$(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>
像这样的简单示例可能会对您有所帮助。没有完整的 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>