ボタンをクリックして選択値と入力値を取得

-1

私は選択、入力、およびボタンを持っています。ボタンをクリックしてオプション値と入力値をアラートに追加すると、変更だけで、選択と、どのように私は同じアラートで選択と入力値onclickを得ることができますか？ここに私のコードは次のとおりです。ボタンをクリックして選択値と入力値を取得

$('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> 
 
<input type="text" value="Input"> 
 
<button type="button">Get value</button>

出典

2017-10-09 jessica

次試してみてくださいです。選択したオプションvalueの属性の代わりに、選択したオプションのテキスト：$('#mySelect option:selected').text()を表示することができます。

出典

2017-10-09 15:59:36 dhilt

私の質問が更新されましたのでご確認ください – jessica

@jessica答えを更新しました。これは同じ話です：適切なjquery-selectorと '.val（）'です。 – dhilt

タイトルを変更して問題を解決したので、少しアップヴォートしてみましょう... – dhilt

$('select').on('change', function(e) { 
    alert($(e.target).val()); 
})

これはすべての選択で動作しますが、唯一現在選択された値を警告します。

$('#myButton').on('click', function() { 
    var text = $('#myInput').val() + ' ' + $('#mySelect').val(); 
    alert(text); 
}) 

<select id="mySelect"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

<input id="myInput" type="text" value="Input"> 
<button id="myButton" type="button">Get value</button>

代わりのidあなたが例$('button')、$('select')と$('input')のために、いくつかの別の方法を使用することができますバインディング：電子はイベント

出典

2017-10-09 15:59:30

thisは、イベント関数内のjqueryオブジェクトではなく、domオブジェクトです。これは、JQueryオブジェクトである$(this)という名前で扱います。

Infactは

this.value - JSにアクセスするための方法、ないjQueryの
$(this).val() - これはjQueryの

$('select').on('change', function() { 
 
    alert($(this).val()); 
 
})

<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> 
 

 
<button type="button">Get value</button>

出典

2017-10-09 16:00:29

の値にアクセスする方法であります

ボタンをクリックすると、選択した選択オプションを対象とする警告が表示され、値が表示されます。

$('select').on('change', function() { 
 
    console.log($(this).val()); 
 
}) 
 

 
$('button[type="button"]').on('click', function(){ 
 
    alert($('select').val()); 
 
});

<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> 
 

 
<button type="button">Get value</button>

出典

2017-10-09 16:01:17

ボタンをクリックすると、以下のコードが実行されます。選択したオプションでメッセージがポップアップ表示されます。データのすべての値を表示する場合は、「選択」オプションを削除します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
$(document).ready(function() { 
 
    $('button').click(function() { 
 
     alert($('select option:selected').text()); 
 
    }); 
 
}); 
 

 

 
</script> 
 
<select> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
</select> 
 

 
<button type="button">Get value</button>

出典

2017-10-09 16:05:48 devKarthikeyanR

私の質問が更新されました – jessica

$（ 'select'）。on（ 'change'、function（）{ アラート（this.value + ' - ' + $（ 'input'））。val（））; }） – devKarthikeyanR

$ {document} .ready（function（）{ $（ 'button'）（function {）{ アラート（$（ '選択オプション：選択済み'）。 $（ 'input'）.val（））; }）; }）; – devKarthikeyanR

それは値を取得するためのonClick関数を呼び出すと、ターゲット要素IDを渡す方が良いでしょう。

<!DOCTYPE html> 
<html> 
<body> 

<select id="select"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

<button type="button" onclick="getValue('select')">Get value</button> 

<script> 
function getValue(e) { 
    var targetElement = document.getElementById(e); 
    var alertValue = targetElement .options[targetElement .selectedIndex].text; 
    alert(alertValue); 
} 
</script> 

</body> 
</html>

出典

2017-10-09 16:11:57 Anonymous

私の質問が更新されました – jessica

ボタンをクリックして選択値と入力値を取得

答えて

関連する問題