CODEWITHSUNDEEP
jqueryselect
Budimir
Budimir

Reputation: 39

jquery select not displaying value

I have a radio button which when clicked is displaying select box below so I could choose an option. My problem is that I can't get the value from select box. It returns as null. I guess problem is that it should have another change event in it. Can you tell me how to put another change event inside this change event?

Select box:

<div class="row">
   <div class="col-md-6">
     <div class="radio clip-radio radio-primary">
          <input type="radio" id="radio3" name="vertical" value="Pricelist" />
            <label for="radio3">
            Pricelist
            </label>
     </div>
     <div id="Pricelist" class="desc">
         <div class="form-group">
           <select class="cs-select cs-skin-elastic" name="pricelist" id="pricelist_select">
              <option value="" disabled selected>Select pricelist</option>
              <option value="1">1</option>
              <option value="2">2</option>
           </select>
     </div>
  </div>

jQuery

//Displaying select box when type radio button is clicked
            $(document).ready(function() {
                $("input[name=vertical]").on( "change", function() {
                     var test = $(this).val();
                     $(".desc").hide();
                     $("#"+test).show();
                     $("#pricelist_select").val();
                     $('#pricelist_select').trigger("change");
                    alert($("#pricelist_select").find(":selected").val());
                    $.cookie('pricelist_select', $("#pricelist_select").val());
                } );

            });

CSS for hiding select box

.desc { display: none; }

Upvotes: 1

Views: 1223

Answers (1)

Dekel
Dekel

Reputation: 62676

Just use $(this).val() instead or $('#pricelist_select').val() if you are not inside the scope of the #pricelist_select element:

$('#pricelist_select').change(function() {
  console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="cs-select cs-skin-elastic" name="pricelist" id="pricelist_select"> 
  <option value="" disabled>Select pricelist</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Upvotes: 1

Related Questions