1

NoobはここでJqueryを使って簡単なことをしようとしています。基本的に、次のような小さな選択オプションのドロップダウンがあります。

<select onchange="javascript:swapContent('con3');">
    <option>selection 1</option>
    <option>selection 2</option>
    <option>selection 3</option>
</select>

現在、ajaxを介して$php変数に投稿されています。

$contentVar = $_POST['contentVar'];

javascript関数はここにあります：

<script language="JavaScript" type="text/javascript">
function swapContent(cv) {
    $("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "myphpscript.php";
    $.post(url, {contentVar: cv} ,function(data) {
        $("#myDiv").html(data).show();
    });    
}
</script>

代わりに、select-optionドロップダウンの値を投稿するにはどうすればよいですか？

これは基本的なことですが、どこかから始めなければならず、必要なことを行う方法を示すチュートリアルが見つかりません。ご協力ありがとうございました。

4

4 に答える 4

3

代わりに、select-optionドロップダウンの値を投稿するにはどうすればよいですか？

ツアースクリプトに値を送信する場合は、オプション要素に値を指定することから始める必要があります（そして、<select>要素を使用して選択した値を取得できるように、要素にIDを指定します）。

<select onchange="javascript:swapContent('con3');" id="myselect">
    <option value="value1">selection 1</option>
    <option value="value2">selection 2</option>
    <option value="value3">selection 3</option>
</select>

その後：

// get the currently selected value from the dropdown
var value = $('#myselect').val();
$.post(url, { contentVar: cv, selectedValue: value }, function(data) {
    $("#myDiv").html(data).show();
});

一方、選択したオプションのテキストを送信したい場合は、これを使用できます。

// get the currently selected value from the dropdown
var text = $('#myselect option:selected').text();
$.post(url, { contentVar: cv, selectedText: text }, function(data) {
    $("#myDiv").html(data).show();
});

これで、PHPスクリプト内で、値をフェッチできます。

$_POST['selectedValue']
于 2013-01-10T15:52:30.157 に答える
2

HTML：

インラインjavascript変更イベントを選択から削除します。

<select>
  <option>selection 1</option>
  <option>selection 2</option>
  <option>selection 3</option>
</select>

jQuery：

変更イベントを選択にバインドします。このイベント内this.valueで、selectの値になります。

$(document).on("change", "select", function(){
    $("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "myphpscript.php";

    $.post(url, {contentVar: this.value} ,function(data) {
        $("#myDiv").html(data).show();
        });    
});
于 2013-01-10T15:52:52.817 に答える
2 
var val = $('select option:selected').text();

jQueryのセレクター構文を使用して、最初に「select」コントロールを選択し、次にselectコントロールの「option」子を選択します。次に、選択した状態を探します。最後に、テキストを返します。

もちろん、このコードは、ページ上のすべての「選択」コントロールをそのまま選択します。選択したコントロールにIDを指定することをお勧めします。

<select id="mySelect">
    <option>Some option</option>
    <option>Some other option</option>
</select>

次に、コードは次のようになります

var val = $('#mySelect option:selected').text()
于 2013-01-10T15:53:04.257 に答える
1

控えめなJavaScriptアプローチを検討し、htmlマークアップにon-changeイベントを含めず、代わりに、jQueryAPIサイトから以下に示すようにイベントハンドラーをアタッチすることをお勧めします。

<!DOCTYPE html>
<html>
 <head> 
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
  <select name="sweets">
    <option>Chocolate</option>
    <option>Candy</option>
    <option>Taffy</option>
    <option>Fudge</option>
    <option>Cookie</option>
 </select>
 <div></div>
 <script>
   $("select").change(function () {
    var str = "";
    $("select option:selected").each(function () {
       str += $(this).text() + " ";
    });
    $("div").text(str);
   })
  .change();
 </script>
 </body>
</html>
于 2013-01-10T15:58:36.110 に答える