jQuery和LiveQuery的幫助onchange（）

Question

我是新的JS和jQuery，我試圖顯示選擇在兩個不同的地方選擇的值，我通過使用JavaScript功能。哪個使用#ID。但我需要使用Class名稱而不是#ID。我發現jQuery Live提供了簡單的解決方案。請幫助任何人。這是我的jsFiddle鏈接。

這裏我使用兩個選擇選項，一個是選擇和查看選定的評論，另一個是選擇和顯示數量。 JS中使用#ID的註釋選項是可以的。我試圖通過jQuery Livequery在Quantity Option中獲得相同的結果，並從CLASS獲得幫助。

Plaese幫助和提前致謝。

http://jsfiddle.net/kb3gN/7013/

我確實需要幫助這一部分：

#########################

function selectQty(){ 
    $(".qtyClass").change(function(){ 
     var quantity= $(this[this.selectedIndex]).val(); 
     $('.pakQuantity1').html(quantity); 
     $('.pakQuantity2').html(quantity); 
    }); 
} 

##########################

function getOption(){ 
 
    var obj = document.getElementById("commentList"); 
 
    document.getElementById('display2').innerHTML = obj.options[obj.selectedIndex].text ; 
 
    document.getElementById('display1').innerHTML = obj.options[obj.selectedIndex].value ; 
 
} 
 
      
 
function selectQty(){ 
 
    $(".qtyClass").change(function(){ 
 
     var quantity= $(this[this.selectedIndex]).val(); 
 
     $('.pakQuantity1').html(quantity); 
 
     $('.pakQuantity2').html(quantity); 
 
    }); 
 
} 

<script src="http://github.com/brandonaaron/livequery/raw/master/jquery.livequery.js" type="text/javascript"></script> 
 
<form method="post" class="form-horizontal" name="form"> 
 
    <div class="col-sm-6"> 
 
     <label>Add a comment: </label> 
 
     <select id="commentList" name="sale_comments" onchange="getOption()"> 
 
      <option selected="">Choose a Comment</option> 
 
      <option value="1">Extra Spicy</option> 
 
      <option value="2">Extra Sugar</option> 
 
      <option value="3">Alabama</option> 
 
     </select>  
 
    </div> 
 
                      
 
    <div class="col-sm-6"> 
 
     <label>Add Quantity: </label> 
 
     <select id="qtyDropdown" class="qtyClass" name="quantity" onchange="selectQty()"> 
 
      <option selected="" >Quantity</option> 
 
      <option value="1" style="line-height:30px;">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
      <option value="5">5</option> 
 
     </select>  
 
    </div> 
 
</form>  
 

 
<div style=" padding:10px; border-radius:5px; border: 1px solid #666; " > 
 
<!------ This lines are to Show data in Modal Box before Submit----> 
 
    <h4><span ><strong>Package: </strong></span><span style="" class="name">Samsang 4GS </span></h4> 
 
    <h4><span ><strong>Price: </strong></span><span class="price" style="" >1000</span> 
 
    <h4><span ><strong>VAT: </strong></span><span class="tax" style="" >15%</span> </h4> 
 
    <h4><span ><strong>Quantity: </strong></span> <span class="pakQuantity1" id="displayQty2" style="" >1</span></h4> 
 
    <h4><span ><strong>Comment: </strong></span><span class="comment" name="comment" id="display2" style="" >No Comments</span> </h4> 
 
</div> 
 
    
 
<div> 
 
    <span style="display:none;" class="name">Samsang 4GS </span> 
 
    <br /> Name:<span class="price" style="display:;" >1000</span> 
 
    <br /> vat:<span class="tax" style="display:;" >15</span> 
 
    <br /> Quantity:<span class="pakQuantity2" id="displayQty1" style="display:;" >1</span> 
 
    <br /> Commment No:<span class="comment " name="display1" id="display1" style="display:;" ></span> 
 
</div>

Answer 1

這裏我用 - >>http://code.jquery.com/jquery-latest.min.js

function getOption(){ 
 
var obj = document.getElementById("commentList"); 
 
document.getElementById('display2').innerHTML = obj.options[obj.selectedIndex].text ; 
 
document.getElementById('display1').innerHTML = obj.options[obj.selectedIndex].value ; 
 
    } 
 
      
 
function selectQty(){ 
 
    $(".qtyClass").change(function(){ 
 
\t var quantity= $(this[this.selectedIndex]).val(); 
 
    $('.pakQuantity1').html(quantity); 
 
    $('.pakQuantity2').html(quantity); 
 
    
 
}); 
 
}   
 
     
 
    

<script src="http://code.jquery.com/jquery-latest.min.js" 
 
    type="text/javascript"></script> 
 
<form method="post" class="form-horizontal" name="form"> 
 
<div class="col-sm-6"> 
 
<label>Add a comment: </label> 
 
<select id="commentList" name="sale_comments" onchange="getOption()"> 
 
<option selected="">Choose a Comment</option> 
 
<option value="1">Extra Spicy</option> 
 
<option value="2">Extra Sugar</option> 
 
<option value="3">Alabama</option> 
 
</select> \t 
 
</div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
<div class="col-sm-6"> 
 
<label>Add Quantity: </label> 
 
<select id="qtyDropdown" class="qtyClass" name="quantity" onchange="selectQty()"> 
 
<option selected="" >Quantity</option> 
 
<option value="1" style="line-height:30px;">1</option> 
 
<option value="2">2</option> 
 
<option value="3">3</option> 
 
<option value="4">4</option> 
 
<option value="5">5</option> 
 
</select> \t 
 
</div> 
 
</form> \t 
 

 
<div style=" padding:10px; border-radius:5px; border: 1px solid #666; " > 
 
<!------ This lines are to Show data in Modal Box before Submit----> 
 
<h4><span ><strong>Package: </strong></span><span style="" class="name">Samsang 4GS </span></h4> 
 
<h4><span ><strong>Price: </strong></span><span class="price" style="" >1000</span> 
 
<h4><span ><strong>VAT: </strong></span><span class="tax" style="" >15%</span> </h4> 
 
<h4><span ><strong>Quantity: </strong></span> <span class="pakQuantity1" id="displayQty2" style="" >1</span></h4> 
 
<h4><span ><strong>Comment: </strong></span><span class="comment" name="comment" id="display2" style="" >No Comments</span> </h4> 
 
</div> 
 
    
 
    
 
<div> 
 
<span style="display:none;" class="name">Samsang 4GS </span> 
 
<br /> Name:<span class="price" style="display:;" >1000</span> 
 
<br /> vat:<span class="tax" style="display:;" >15</span> 
 
<br /> Quantity:<span class="pakQuantity2" id="displayQty1" style="display:;" >1</span> 
 
<br /> Commment No:<span class="comment " name="display1" id="display1" style="display:;" ></span> 
 
</div>