Я новичок в JavaScript и jQuery. Я хочу показать один combobox-A, который является HTML <select> с его выбранным id и содержимым в другом месте on onChange().
Как передать полный список со списком id, и как я могу передать другие параметры при событии onChange?
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 ответ полезным и просто добавить к нему, если вы программно создаете выбор, то есть важный способ получить это поведение, которое может быть не очевидным. Скажем, у вас есть функция, и вы создаете новый выбор:
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, зависит от браузера. Второй способ, похоже, очень кросс-браузер.
Как получить текстовое значение выбранной опции
У выбранных элементов обычно есть два значения, к которым вы хотите получить доступ.
Сначала есть значение для отправки на сервер, что легко:
$( "#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() );
});
<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
document.getElementById("comboA").onchange = function(){
var value = document.getElementById("comboA").value;
};
</script>
или
<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>
или
<script>
document.getElementById("comboA").onchange = handleChange;
function handleChange(evt){
var value = evt.target.value;
};
</script>
Вы можете попробовать следующий код
<select onchange="myfunction($(this).val())" id="myId">
</select>
этот код, как только я напишу, просто объясню onChange событие выбора, вы можете сохранить этот код как 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>Это сработало для меня onchange = setLocation($(this).val())
Здесь.
@Html.DropDownList("Demo",
new SelectList(ViewBag.locs, "Value", "Text"),
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });