CODEWITHSUNDEEP
jqueryhtml
TShrestha
TShrestha

Reputation: 1318

Adding Select option with jquery is not working

I am trying to adjust the option value according to the quantity of the product, for the combination selected. I have done as below:

 var html='';
 jQuery.each(array, function(i,val){
      html +='<option value="'+val+'">'+val+'</option>';
 });
 var select_div='<select id="ajaxselect"  name="product_qty">'+html+'</select>';
 // alert(old_price);
 $('#select_quantity').html(select_div);
 $("#ajaxselect").css({
      width: "50px", height: "50px", display: "block", top: "0px", left: "0px",
 });

Where array is defined and its value is coming.

This will give me this in view after jquery effect

 <div id="select_quantity">
      <select id="ajaxselect" name="product_qty" style="width: 50px; height: 50px; display: block; top: 0px; left: 0px;">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
      </select>
 </div>

But after selecting and subbmitting form, the product_quantity is not submitted as post element The post is as below

 Array ( 
      [id] => 2 
      [name] => Cardigan Stitch 
      [img] => /images/product/174febdfab0e13f983cc3cce91c1a5b9.jpg 
      [pc_id] => 1 
      [price] => 15 
      [product_color] => 2 
      [product_size] => 4 
      [add_to_cart] => )

while it should be like this:

 Array ( 
      [id] => 2 
      [name] => Cardigan Stitch 
      [img] => /images/product/174febdfab0e13f983cc3cce91c1a5b9.jpg 
      [pc_id] => 1 
      [price] => 15 
      [product_color] => 2 
      [product_size] => 4 
      [product_qty] => 1 
      [add_to_cart] => )

I have done same in another project and its working fine there. But its not working here. CAn anyone please help me. Trying to fix it since 3 hours. Any kind of help are appreciated. Thank you.

Upvotes: 1

Views: 39

Answers (2)

GGO
GGO

Reputation: 2748

Make sure your div #select_quantity is inside the submitted form tag. Maybe you have a misplaced closing tag in source code.

Upvotes: 1

Hema Nandagopal
Hema Nandagopal

Reputation: 678

We can get the selected value using :selected. Hope this helps.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
  var html='';
            jQuery.each(Array, function(i,val){
            html +='<option value="'+val+'">'+val+'</option>';
            });
            var select_div='<select id="ajaxselect" name="product_qty">'+html+'</select>';
            $('#select_quantity').html(select_div);
            alert($( "#select_quantity option:selected").text())
            
            $("#ajaxselect").css({
            width: "50px", height: "50px", display: "block", top: "0px", left: "0px",
            });


});
</script>
</head>
<body>


</body>
</html>

Upvotes: 0

Related Questions