のdocument.getElementByIdは動作しますが、$が、私はここにこのコードを持っているエラー

Question

を投げている：1のJavaScriptで、もう一つはとても似jqueryのですが、私は、コードのこれら二つのラインを持っている私のスクリプトで

<select id="test"> 
     <option value="1">test1</option> 
     <option value="2" selected="selected">test2</option> 
     <option value="3">test3</option> 
</select> 

を：

var e = document.getElementById("user"); 
var e1 = $("#user"); 

私も、このように私のコンソールでそれらをプリントアウト：

console.log(e) 
console.log(e1) 

彼らは同じことを印刷しています。しかし、私はこのようなon変更イベントコード書くとき：

$("#user").change(function() { 
     console.log(e.options[e.selectedIndex].text) 
}); 

をまさに私がドロップダウンから選択するものを印刷しています。これは、DOMからフェッチするこのjavascriptの方法が動作していることです。 e1そう等と同じことは：

Uncaught TypeError: Cannot read property 'undefined' of undefined (anonymous function)create:167 f.event.dispatchjquery-1.7.1.min.js:3 f.event.add.i.h.handle.i

（Chromeの開発ツールから見て）

が起こっていただきました：

$("#user").change(function() { 
    console.log(e1.options[e1.selectedIndex].text) 
}); 

エラーを投げていますか？私はJavascriptとjqueryの両方に新しいです！なぜ私の場合、jqueryは機能していないのですか？

Answer 1

あなたはjqueryのを使用していて、e1はjQueryオブジェクトの試みですので：

console.log(e1.find('option:selected').text()) 

あなたがget()を使用することができ、実際の要素をつかむために：

var select = $('#select').get(0) // Grab original DOM element 
select.options // It'll work now... 

Answer 2

console.log(e1[0].options[e1[0].selectedIndex].text)

Answer 3

var e = document.getElementById("user"); 

これはjavascriptオブジェクトを作成します。

var e1 = $("#user"); 

これはjqueryオブジェクトを作成します。この場合、javascriptプロパティは使用できません。 jqueryプロパティを使用する必要があります。

Answer 4

記事の上部に表示される選択メニューのIDは 'ユーザー'ではなく 'テスト'です。実際に作業しているコードには、「user」というIDがあるものとします。 e1はjQueryオブジェクトなので、値にアクセスするにはe1.options [e1.selectedIndex] .textの代わりにe1.val（）を使用します。あなたはjQueryコードとJavaScriptコードを混ぜています。

Answer 5

e1はjQueryを使用して選択したため、jQueryオブジェクトです。これは通常のjs dom要素ではなく、どのように使用しようとしています。

これはうまく機能する必要があります。

$（ "＃ユーザ"）に変更（関数（）{ はconsole.log（e1.val（））;} ）。

val（）は、フォーム要素値を統一したラッパーを提供するjQuery関数です。選択したインデックスを見つける必要はなく、select objなどからアクセスする必要はありません。これはjQueryの機能の1つです人生を楽にします。