これを実行し、パラメーターを選択フィールドに$(this).val();適用することで、選択入力の値を取得できるという印象を受けました。onchange
IDを参照した場合にのみ機能するように見えます。
これを使用してどうすればよいですか。
質問する
2510116 次
18 に答える
1778
これを試して-
$('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>onchangeイベントで参照することもできます-
function getval(sel)
{
alert(sel.value);
}<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>于 2012-06-24T17:02:49.450 に答える
125
この$（this）.val（）;を実行することで、select入力の値を取得できるという印象を受けました。
これは、目立たないようにサブスクライブする場合に機能します（これが推奨されるアプローチです）。
$('#id_of_field').change(function() {
// $(this).val() will work here
});
マークアップを使用onselectしてスクリプトと混合する場合は、現在の要素への参照を渡す必要があります。
onselect="foo(this);"
その後：
function foo(element) {
// $(element).val() will give you what you are looking for
}
于 2012-06-24T17:03:51.127 に答える
122
これは私にとって助けになります。
選択の場合：
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
ラジオ/チェックボックスの場合：
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
于 2015-04-09T10:50:51.800 に答える
22
イベント委任方法を試してください。これはほとんどすべての場合に機能します。
$(document.body).on('change',"#selectID",function (e) {
//doStuff
var optVal= $("#selectID option:selected").val();
});
于 2015-03-17T15:00:41.900 に答える
19
$('#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>
于 2016-08-16T13:27:29.513 に答える
19
矢印関数のスコープは関数とは異なり
this.value、矢印関数に未定義が与えられます。使用を修正するには
$('select').on('change',(event) => {
alert( event.target.value );
});
于 2018-08-16T13:01:47.557 に答える
14
これを試すことができます（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>または、次のような単純なJavascriptを使用できます-
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>于 2016-05-23T03:51:53.957 に答える
10
jQueryは、Changeイベントを使用して選択したhtml要素の値を取得します
$(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> 于 2019-04-22T17:10:38.537 に答える
9
これは私のために働いたものです。運が悪かった他のすべてを試しました：
<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>
Mozillaから取得
于 2016-01-25T22:11:25.750 に答える
8
jQueryサイトを探す
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." );
});
jQueryの例：
すべてのテキスト入力要素に妥当性テストを追加するには：
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});
于 2015-01-15T15:06:33.793 に答える
8
すべての選択について、この関数を呼び出します。
$('select').on('change', function()
{
alert( this.value );
});
1つだけ選択してください：
$('#select_id')
于 2017-02-14T18:04:06.430 に答える
8
$('#select-id').change(function() {
console.log($(this).val());
});
于 2021-06-05T02:59:35.050 に答える
4
jQuery(document).ready(function(){
jQuery("#id").change(function() {
var value = jQuery(this).children(":selected").attr("value");
alert(value);
});
})
于 2018-08-04T07:13:44.430 に答える
4
BS4、thymeleaf、Springbootで開発した例を紹介します。
私は2つのSELECTを使用しています。ここで、2番目（ "subtopic"）は、first（ "topic"）の選択に基づいてAJAX呼び出しによって埋められます。
まず、thymeleafスニペット：
<div class="form-group">
<label th:for="topicId" th:text="#{label.topic}">Topic</label>
<select class="custom-select"
th:id="topicId" th:name="topicId"
th:field="*{topicId}"
th:errorclass="is-invalid" required>
<option value="" selected
th:text="#{option.select}">Select
</option>
<optgroup th:each="topicGroup : ${topicGroups}"
th:label="${topicGroup}">
<option th:each="topicItem : ${topics}"
th:if="${topicGroup == topicItem.grp} "
th:value="${{topicItem.baseIdentity.id}}"
th:text="${topicItem.name}"
th:selected="${{topicItem.baseIdentity.id==topicId}}">
</option>
</optgroup>
<option th:each="topicIter : ${topics}"
th:if="${topicIter.grp == ''} "
th:value="${{topicIter.baseIdentity.id}}"
th:text="${topicIter.name}"
th:selected="${{topicIter.baseIdentity?.id==topicId}}">
</option>
</select>
<small id="topicHelp" class="form-text text-muted"
th:text="#{label.topic.tt}">select</small>
</div><!-- .form-group -->
<div class="form-group">
<label for="subtopicsId" th:text="#{label.subtopicsId}">subtopics</label>
<select class="custom-select"
id="subtopicsId" name="subtopicsId"
th:field="*{subtopicsId}"
th:errorclass="is-invalid" multiple="multiple">
<option value="" disabled
th:text="#{option.multiple.optional}">Select
</option>
<option th:each="subtopicsIter : ${subtopicsList}"
th:value="${{subtopicsIter.baseIdentity.id}}"
th:text="${subtopicsIter.name}">
</option>
</select>
<small id="subtopicsHelp" class="form-text text-muted"
th:unless="${#fields.hasErrors('subtopicsId')}"
th:text="#{label.subtopics.tt}">select</small>
<small id="subtopicsIdError" class="invalid-feedback"
th:if="${#fields.hasErrors('subtopicsId')}"
th:errors="*{subtopicsId}">Errors</small>
</div><!-- .form-group -->
モデルコンテキストに格納されているトピックのリストを繰り返し処理し、すべてのグループとそのトピックを表示し、その後、グループを持たないすべてのトピックを表示します。BaseIdentityは、@Embedded複合キーBTWです。
さて、これが変更を処理するjQueryです：
$('#topicId').change(function () {
selectedOption = $(this).val();
if (selectedOption === "") {
$('#subtopicsId').prop('disabled', 'disabled').val('');
$("#subtopicsId option").slice(1).remove(); // keep first
} else {
$('#subtopicsId').prop('disabled', false)
var orig = $(location).attr('origin');
var url = orig + "/getsubtopics/" + selectedOption;
$.ajax({
url: url,
success: function (response) {
var len = response.length;
$("#subtopicsId option[value!='']").remove(); // keep first
for (var i = 0; i < len; i++) {
var id = response[i]['baseIdentity']['id'];
var name = response[i]['name'];
$("#subtopicsId").append("<option value='" + id + "'>" + name + "</option>");
}
},
error: function (e) {
console.log("ERROR : ", e);
}
});
}
}).change(); // and call it once defined
change（）の最初の呼び出しは、ページの再ロード時に実行されるか、バックエンドでの初期化によって値が事前に選択されているかどうかを確認します。
ところで：私（およびユーザー）がBS4が不要な空のフィールドを緑色としてマークするのが気に入らなかったため、「手動」フォーム検証（「is-valid」/「is-invalid」を参照）を使用しています。しかし、それはこのQの範囲外であり、興味があれば投稿することもできます。
于 2020-01-20T08:54:41.433 に答える
3
これらが機能しない場合は、DOMがロードされておらず、要素がまだ見つからないことが原因である可能性があることに注意してください。
修正するには、本文の最後にスクリプトを配置するか、ドキュメントを使用してください。
$.ready(function() {
$("select").on('change', function(ret) {
console.log(ret.target.value)
}
})
于 2018-04-19T15:04:02.557 に答える
3
JSのみ
let select=document.querySelectorAll('select')
select.forEach(function(el) {
el.onchange = function(){
alert(this.value);
}}
)
于 2020-08-20T07:26:00.443 に答える
2
追加したいのですが、完全なカスタムヘッダー機能が必要です
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();
}
});
}
})
}
于 2018-12-17T13:09:38.837 に答える
1
新しいアイデアに役立つ例があります。これが誰かに役立つことを願っています。
$('#editpricelist_box').change(function ($e){
$('input[name="edit_unit_price"]').val(parseFloat(this.val()).toFixed(2));
console.log(this.val());
});
于 2021-11-05T12:42:59.340 に答える