2017-11-14 8 views
0

私は、ブートストラップ3モーダルポップアップにあるフォームでHtml選択を生成しています。私は選択された値を取得し、データベースにダンプするためにそれをJQueryに渡そうとしています。jQuery get Selectオプションの値が未定義エラーを表示

他の入力フィールドとテキストエリアフィールドはtinyMCEを使用していますが、私は$('#id').val();を使用しても問題なく値を取得できます。私はデータを表示するために取得するためのさまざまな方法を試してみました午前と私の人生のためのオプションの値を取得することはできません

<select id='practitionerID' name='practitionerID' class='form-control'> 
    <option value="1">Doctor 1</option> 
    <option value="2">Doctor 2</option> 
</select> 

選択マイとしてビューソースで超簡単で、表示されています。

私は次のことを試してみました:

$('#practitionerID').prop('selectedIndex'); // give's me -1 no matter the option selected 
$('#practitionerID').val(); // returns null 
$('#practitionerID').text(); // returns null, dont want the text anyways 
$("#practitionerID option:selected").val(); // returns undefined 
$("#practitionerID option:selected").text(); //returns undefined, still not what i want. 

EDIT: 私は何か他のものを選択しているにもかかわらず、だから、これを試してみましたが、それは実際に今私に価値を与えるだけで、これまで私のドロップダウンの最初のオプションを提供します。 $( '#practitionerID:selected')。val();

私が考えることができるのは、これを乗り越えていることが、私がモーダルでロードしているという事実だけです。たぶんそれは何か理由のためにそれを読み取ることができないプロパティを参照してください?

既存のレコードをロードしてdata.event.practitionerIDを取得すると、それは私に価値のある値を与えます。しかし、私はそれを得るときに私は値を設定するように見えることはできません。だから、この選択のIDに問題があるように見えますが、私はちょうどどこかどのように見えるのですか?

ご協力いただければ幸いです!

+0

[JavaScriptを使用してドロップダウンリストで選択した値を取得しますか?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) – ncardeli

+1

あなたのような感じです要素が存在する前にチェックしています。セレクタがフォームコントロールであり、呼び出されたときに存在する場合、 'val()'は 'null'または' undefined'を返しません。文字列(または複数選択の場合は配列)を返します。 – charlietfl

+0

@ncardeli実際に選択された値ではありません。私はドロップダウンから選択するときに値に基づいて設定しようとしています。その人物と同じ問題ではありません。実際には「選択された」パラメータを探しています。 – jAC

答えて

0

に役立ちます。

私のために働いたソリューションは、問題は、私は、同じIDを持つドロップダウンを使用したものと同じページにあるクイック追加機能を持っていたと推測され

$('#practitionerID').val(); 

ました。それは毎回最初のドロップダウンから値を取っていた。

この間違いが他人を助けることができたら幸いです。

1

希望これは、私は完全な馬鹿だ....

$("#select").submit(function(event) { 
 
    var select=$('#practitionerID').val(); 
 
    alert(select); 
 
    event.preventDefault(); 
 
});
<html> 
 
<head> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 

 
<!-- Button to trigger modal --> 
 
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Launch demo modal</a> 
 
    
 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
     <form id="select"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
 
      <h4 class="modal-title">Select!</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     
 
      <select id='practitionerID' name='practitionerID' class='form-control'> 
 
    <option value="1">Doctor 1</option> 
 
    <option value="2">Doctor 2</option> 
 
</select> 
 
      
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="submit" class="btn btn-primary">Submit</button> 
 
     </div> 
 
     </div><!-- /.modal-content --> 
 
    </form> 
 
     </div><!-- /.modal-dialog --> 
 
    </div><!-- /.modal --> 
 
    
 
    
 
</div> 
 
</body> 
 
</html>

+0

これは独立して動作しますが、私のコードでは動作しません。 charlietfはまだロードされていないが、どうやってどうやっているのかわかりません。だから、モーダルのフィールドは、PHPスクリプトによって生成され、私はちょうど送信されている "追加"ボタンをクリックする前に画面上にあります。私はもう少しのことで遊んでいき、すぐに更新されます。 – jAC

+0

何らかの理由で、実際の値は常にドロップダウンの最初の値です。イベントは、上記のコードは動作しますが、私のリストでは、それが常に最初の項目の値を与える選択されているかどうかは気にしないようです。誰もがこれについて考えている? – jAC

関連する問題