Ik ben een beginneling in JavaScript en jQuery. Ik wil één combobox-A laten zien, dat is een HTML <select>met zijn geselecteerde iden inhoud op de andere plaats op onChange().
Hoe kan ik de volledige combobox met zijn geselecteerde iddoorgeven, en hoe kan ik andere parameters doorgeven die in brand staan van de onChange-gebeurtenis?
Antwoord 1, autoriteit 100%
function getComboA(selectObject) {
var value = selectObject.value;
console.log(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>Antwoord 2, autoriteit 14%
Een andere benadering die in sommige situaties handig kan zijn, is het direct doorgeven van de waarde van de geselecteerde <option />aan de functie als volgt:
function myFunction(chosen) {
console.log(chosen);
}<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>Antwoord 3, autoriteit 8%
Hoe u dit doet in 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>
Je moet ook weten dat Javascript en jQuery niet identiek zijn. jQuery is geldige JavaScript-code, maar niet alle JavaScript is jQuery. Je moet de verschillen opzoeken en ervoor zorgen dat je de juiste gebruikt.
Antwoord 4, autoriteit 3%
JavaScript-oplossing
<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>
of
<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>
of
<script>
document.getElementById("comboA").onchange = handleChange;
function handleChange(evt){
var value = evt.target.value;
};
</script>
Antwoord 5
Ik vond het antwoord van @Piyush nuttig, en om eraan toe te voegen, als je programmatisch een select maakt, dan is er een belangrijke manier om dit gedrag te krijgen dat misschien niet voor de hand ligt. Stel dat u een functie heeft en een nieuwe selectie maakt:
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';
Het normale gedrag kan zijn om te zeggen
newSelect.onchange = changeitem;
Maar dit staat je niet echt toe om dat argument te specificeren, dus in plaats daarvan kun je dit doen:
newSelect.setAttribute('onchange', 'changeitem(this)');
En u kunt de parameter instellen. Als je het op de eerste manier doet, is het argument dat je bij je onchange-functie krijgt, browserafhankelijk. De tweede manier lijkt prima te werken in verschillende browsers.
Antwoord 6
jQuery-oplossing
Hoe krijg ik de tekstwaarde van een geselecteerde optie
Geselecteerde elementen hebben doorgaans twee waardenwaartoe u toegang wilt.
Eerst is er de waardedie naar de server moet worden verzonden, wat eenvoudig is:
$( "#myselect" ).val();
// => 1
De tweede is de tekstwaardevan de selectie.
Gebruik bijvoorbeeld het volgende selectievak:
<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>
Als u de string “MR” wilde ontvangen als de eerste optie is geselecteerd (in plaats van alleen “1”) zou u dat op de volgende manier doen:
$( "#myselect option:selected" ).text();
// => "Mr"
Zie ook
Antwoord 7
Dit is geholpen voor mij.
Voor selecte:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
Voor radio / selectievakje:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
Antwoord 8
U kunt de balgcode proberen
<select onchange="myfunction($(this).val())" id="myId">
</select>
Antwoord 9
Deze code Nadat ik schrijf voor het uitleggen van Onchange Evenement of Select u kunt deze code opslaan als HTML en zie de uitvoer die het werkt. En eenvoudig te begrijpen voor u.
<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>
Antwoord 10
Voor het geval iemand op zoek is naar een React-oplossing zonder aanvullende afhankelijkheden te hoeven downloaden, zou je kunnen schrijven:
<select onChange={this.changed(this)}>
<option value="Apple">Apple</option>
<option value="Android">Android</option>
</select>
changed(){
return e => {
console.log(e.target.value)
}
}
Zorg ervoor dat u de functie gewijzigd() bindt in de constructor zoals:
this.changed = this.changed.bind(this);
Antwoord 11
Dit werkte voor mij onchange = setLocation($(this).val())
Hier.
@Html.DropDownList("Demo",
new SelectList(ViewBag.locs, "Value", "Text"),
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Antwoord 12
Gewoon:
Antwoord 13
Html-sjabloon:
<select class="staff-select">
<option value="">All</option>
<option value="196">Ivan</option>
<option value="195">Jon</option>
</select>
Js-code:
const $staffSelect = document.querySelector('.staff-select')
$staffSelect.onchange = function () {
console.log(this.value)
}