Как передать параметры на onChange html select
Я новичок в JavaScript и jQuery. Я хочу показать один combobox-A, который является HTML <select> с выбранного id и содержимое в другом месте onChange ().
как я могу передать полный combobox с его select id, и как я могу передать другие параметры в огне события onChange?
9 ответов
function getComboA(selectObject) {
var value = selectObject.value;
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
приведенный выше пример возвращает выбранное значение поля со списком на onChange, после событие.
другой подход, который может быть удобно в некоторых ситуациях, передает значение выбранного <option /> непосредственно к функции, как это:
<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
Как это сделать в jQuery:
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>
вы также должны знать, что JavaScript и jQuery не идентичны. jQuery является допустимым кодом JavaScript, но не весь JavaScript является jQuery. Вы должны посмотреть различия и убедитесь, что вы используете соответствующий.
Я нашел ответ @Piyush полезным, и просто добавить к нему, если вы программно создаете выбор, то есть важный способ получить это поведение, которое может быть не очевидным. Предположим, у вас есть функция, и вы создаете новый select:
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';
нормальным поведением может быть сказать
newSelect.onchange = changeitem;
но это действительно не позволяет вам указать, что аргумент передан, поэтому вместо этого вы можете сделать это:
newSelect.setAttribute('onchange', 'changeitem(this)');
и вы можете установить параметр. Если вы сделаете это первым способом, то аргумент вы получите на свой onchange функция будет зависеть от браузера. Второй способ, кажется, работает кросс-браузер просто отлично.
решение jQuery
как получить текстовое значение выбранного параметра
Select элементы обычно имеют два значения что вы хотите получить доступ.
Сначала есть стоимостью для отправки на сервер, что легко:
$( "#myselect" ).val();
// => 1
второй -текст выбрать.
Например, используя следующее поле выбора:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
если вы хотели получить строка " Mr "если был выбран первый вариант (вместо" 1"), Вы бы сделали это следующим образом:
$( "#myselect option:selected" ).text();
// => "Mr"
см. также
это помогло мне.
для выберите:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
переключатель радио/:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
этот код, как только я напишу для just explain onChange event of select, вы можете сохранить этот код как html и посмотреть, как он работает.и легко понять, для вас.
<html>
<head>
<title>Register</title>
</head>
<body>
<script>
function show(){
var option = document.getElementById("category").value;
if(option == "Student")
{
document.getElementById("enroll1").style.display="block";
}
if(option == "Parents")
{
document.getElementById("enroll1").style.display="none";
}
if(option == "Guardians")
{
document.getElementById("enroll1").style.display="none";
}
}
</script>
<form action="#" method="post">
<table>
<tr>
<td><label>Name </label></td>
<td><input type="text" id="name" size=20 maxlength=20 value=""></td>
</tr>
<tr style="display:block;" id="enroll1">
<td><label>Enrollment No. </label></td>
<td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
</tr>
<tr>
<td><label>Email </label></td>
<td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
</tr>
<tr>
<td><label>Mobile No. </label></td>
<td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="2" cols="20"></textarea></td>
</tr>
<tr >
<td><label>Category</label></td>
<td><select id="category" onchange="show()"> <!--onchange show methos is call-->
<option value="Student">Student</option>
<option value="Parents">Parents</option>
<option value="Guardians">Guardians</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" value="Sign Up">
</form>
</body>
</html>
выберите новый автомобиль из списка. При выборе нового автомобиля запускается функция, которая выводит значение выбранного автомобиля.
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" onchange="myFunction(this)">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p id="demo"></p>
<script>
function myFunction(selectObject) {
var x = selectObject.value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>массив JavaScript, для каждого цикла и onChange выберите
<!DOCTYPE html>
<html>
<body>
<p id="select"></p>
<script>
var txt = "";
var person = {id1:"John", id2:"Doe", id3:"John Doe"};
var x;
text = "<select id='mySelect' onchange='myFunction()'>";
for (x in person) {
text += "<option value='" + x + "'>" + person[x] + "</option>";
}
text += "</select>";
document.getElementById("select").innerHTML = text;
</script>
<p id="text"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("text").innerHTML = "You selected: " + x + " as value";
}
</script>
</body>
</html>