Ich hatte den Eindruck, dass ich den Wert einer Select-Eingabe erhalten kann, indem Sie diese $(this).val();
ausführen und den Parameter onchange
auf das Select-Feld anwenden.
Anscheinend funktioniert es nur, wenn ich auf die ID verweise.
Wie mache ich das?.
Versuche dies-
$('select').on('change', function() {
alert( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Sie können auch mit onchange event- referenzieren.
function getval(sel)
{
alert(sel.value);
}
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
Ich hatte den Eindruck, dass ich den Wert eines select bekommen konnte Eingabe durch Ausführen von $ (this) .val ();
Dies funktioniert, wenn Sie unauffällig abonnieren (was der empfohlene Ansatz ist):
$('#id_of_field').change(function() {
// $(this).val() will work here
});
wenn Sie onselect
verwenden und Markup mit Skript mischen, müssen Sie einen Verweis auf das aktuelle Element übergeben:
onselect="foo(this);"
und dann:
function foo(element) {
// $(element).val() will give you what you are looking for
}
Das wird mir geholfen.
Für wählen:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
Für Radio/Checkbox:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
Versuchen Sie es mit der Ereignisdelegierungsmethode. Dies funktioniert in fast allen Fällen.
$(document.body).on('change',"#selectID",function (e) {
//doStuff
var optVal= $("#selectID option:selected").val();
});
Sie können dies versuchen (mit jQuery ) -
$('select').on('change', function()
{
alert( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Oder Sie können einfach Javascript wie dieses verwenden-
function getNewVal(item)
{
alert(item.value);
}
<select onchange="getNewVal(this);">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Das hat bei mir funktioniert. Alles andere ohne Glück versucht:
<html>
<head>
<title>Example: Change event on a select</title>
<script type="text/javascript">
function changeEventHandler(event) {
alert('You like ' + event.target.value + ' ice cream.');
}
</script>
</head>
<body>
<label>Choose an ice cream flavor: </label>
<select size="1" onchange="changeEventHandler(event);">
<option>chocolate</option>
<option>strawberry</option>
<option>Vanilla</option>
</select>
</body>
</html>
Aus Mozilla
Rufen Sie für alle Auswahlmöglichkeiten diese Funktion auf.
$('select').on('change', function()
{
alert( this.value );
});
Für nur eine auswählen:
$('#select_id')
Suchen Sie nach jQuery site
HTML:
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
JAVASCRIPT:
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});
das Beispiel von jQuery:
So fügen Sie allen Texteingabeelementen einen Gültigkeitstest hinzu:
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});
$('select_id').on('change', function()
{
alert(this.value); //or alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_id">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Die Pfeilfunktion hat einen anderen Gültigkeitsbereich als die Funktion. this.value
wird für eine Pfeilfunktion undefined undefined angeben
$('select').on('change',(event) => {
alert( event.target.value );
});
Wenn diese nicht funktionieren, kann dies daran liegen, dass das DOM nicht geladen wurde und Ihr Element noch nicht gefunden wurde.
Um das Problem zu beheben, stellen Sie das Skript am Ende des Hauptteils oder verwenden Sie das Dokument fertig
$.ready(function() {
$("select").on('change', function(ret) {
console.log(ret.target.value)
}
})
jQuery(document).ready(function(){
jQuery("#id").change(function() {
var value = jQuery(this).children(":selected").attr("value");
alert(value);
});
})
Ich möchte Folgendes hinzufügen: Wer benötigt die vollständige benutzerdefinierte Header-Funktionalität
function addSearchControls(json) {
$("#tblCalls thead").append($("#tblCalls thead tr:first").clone());
$("#tblCalls thead tr:eq(1) th").each(function (index) {
// For text inputs
if (index != 1 && index != 2) {
$(this).replaceWith('<th><input type="text" placeholder=" ' + $(this).html() + ' ara"></input></th>');
var searchControl = $("#tblCalls thead tr:eq(1) th:eq(" + index + ") input");
searchControl.on("keyup", function () {
table.column(index).search(searchControl.val()).draw();
})
}
// For DatePicker inputs
else if (index == 1) {
$(this).replaceWith('<th><input type="text" id="datepicker" placeholder="' + $(this).html() + ' ara" class="tblCalls-search-date datepicker" /></th>');
$('.tblCalls-search-date').on('keyup click change', function () {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
table.columns(index).search(v).draw();
});
$(".datepicker").datepicker({
dateFormat: "dd-mm-yy",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat: "h:m",
altField: "#tarih-db",
monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
firstDay: 1,
dateFormat: "yy-mm-dd",
showOn: "button",
showAnim: 'slideDown',
showButtonPanel: true,
autoSize: true,
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: false,
buttonText: "Tarih Seçiniz",
closeText: "Temizle"
});
$(document).on("click", ".ui-datepicker-close", function () {
$('.datepicker').val("");
table.columns(5).search("").draw();
});
}
// For DropDown inputs
else if (index == 2) {
$(this).replaceWith('<th><select id="filter_comparator" class="styled-select yellow rounded"><option value="select">Seç</option><option value="eq">=</option><option value="gt">>=</option><option value="lt"><=</option><option value="ne">!=</option></select><input type="text" id="filter_value"></th>');
var selectedOperator;
$('#filter_comparator').on('change', function () {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
selectedOperator = v;
if(v=="select")
table.columns(index).search('select|0').draw();
$('#filter_value').val("");
});
$('#filter_value').on('keyup click change', function () {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
table.columns(index).search(selectedOperator + '|' + v).draw();
}
});
}
})
}
jQuery ruft den Wert ausgewählter HTML-Elemente ab, indem es das Ereignis Change verwendet
$(document).ready(function () {
$('body').on('change','#select_box', function() {
$('#show_only').val(this.value);
});
});
<!DOCTYPE html>
<html>
<title>jQuery Select OnChnage Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select_box">
<option value="">Select One</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
<br><br>
<input type="text" id="show_only" disabled="">
</body>
</html>