Question

我是JS和jQuery的新手，我试图在两个不同的地方显示Select字段中的选定值，我是通过使用Javascript函数完成的。哪个使用#ID。但我需要使用类名而不是#ID。我发现jQuery Live易于解决。请帮助我任何人。这是我的jsFiddle链接。

这里我使用两个选择选项，一个是选择和查看选定的注释，另一个是选择和显示数量。使用#ID在JS中注释选项是可以的。我试图通过jQuery Livequery和CLASS的帮助在Quantity Option中获得相同的结果。

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

我在这里使用了 - ＆gt;＆gt; http://code.jquery.com/jquery-latest.min.js

＆＃13;

   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);
    
 });
}

＆＃13;

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

＆＃13;

用于onchange的jQuery和Livequery帮助（）

1 个答案: