1

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; }
Budimir
  • 39
  • 1
  • 12
  • Please click the `<>` button, insert the RENDERED HTML of the php since this is NOT a PHP question. Then click tidy and you have a [mcve]. Also you need to include the cookie JS – mplungjan Dec 25 '16 at 18:55
  • You should not get any value from a disabled select. You are not posting enough of the code that gives you the problem - here is how to get the text in a simpler way: http://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery – mplungjan Dec 26 '16 at 09:31
  • I have edited my qestion, so maybe now it's more clear what is my problem. – Budimir Dec 26 '16 at 16:43

1 Answers1

1

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>
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • I like you're solution and I have tried it, but I always get the last value. I don't understand why? How can I debug that? – Budimir Dec 25 '16 at 20:36
  • Any chance you have 2 `select` elements? Otherwise it makes no sense at all (if you use the exact solution I gave). – Dekel Dec 25 '16 at 20:37
  • Yes, I have three of them on same page. I thought id is refering to exact select. – Budimir Dec 25 '16 at 20:59
  • Yes. My next question is if they each have unique id. Can you create a working example in http://jsfiddle.net? – Dekel Dec 25 '16 at 21:00
  • From what I see everything works great in your jsfiddle. what is the problem? – Dekel Dec 25 '16 at 21:10
  • I always get first value from select box, no matter what I choose. I don't understand that. Is it possible that some other part of the code is preventing it from getting the value? If ID is unique than it should be OK? – Budimir Dec 25 '16 at 21:16
  • I just used the example in your jsfiddle and I get the correct result (I get 25 if I choose 25, 15 if I choose 15, etc) – Dekel Dec 25 '16 at 21:21
  • Yes, but in my actual code, I always get same number, no matter what I use. Maybe is something else that is bugging me. – Budimir Dec 25 '16 at 21:24
  • I think it's something else. I asked a jsfiddle not with my code, but with your code (a jsfiddle that **shows the problem**) Not a working one :) – Dekel Dec 25 '16 at 21:25
  • Yes I did. This is what's reported: – Budimir Dec 25 '16 at 21:41
  • Yes I did. http://portal.drezga.hr/pma/calculation/calculation_wizard.php:1314:50 n.Callbacks/j http://portal.drezga.hr/pma/vendor/jquery/jquery.min.js:2:27131 n.Callbacks/k.fireWith http://portal.drezga.hr/pma/vendor/jquery/jquery.min.js:2:27949 .ready http://portal.drezga.hr/pma/vendor/jquery/jquery.min.js:2:29781 K – Budimir Dec 25 '16 at 21:43
  • It looks like you have errors in your javascript (however I'm not sure what exactly the error is. It's impossible to read it this way). – Dekel Dec 25 '16 at 21:44
  • OK, I will just keep trying. Thanks for the help. – Budimir Dec 25 '16 at 21:45
  • @Budimir - your JSFiddle does not look or work like the example in your question. Please create a [mcve] that shows the actual issue instead of confusing those who come after by accepting an "answer" that is not fixing your actual problem – mplungjan Dec 26 '16 at 09:30
  • @mplungjan according to the question - the answer is correct. If the question was regarding the javascript errors - I agree, the answer is not correct. But it isn't the case. The answer gives the exact solution to the problem the OP mentioned. – Dekel Dec 26 '16 at 12:48
  • Please take a look at my edited question. Maybe now is more clear what my problem is. – Budimir Dec 26 '16 at 16:44
  • I don't see your checkbox in the example, and please remove all the PHP from your code. Keep only the output (the generated html). – Dekel Dec 26 '16 at 16:45
  • Ok, I have edit my question and added HTML code with radio button and select box. Also added CSS class which is hiding that select box until radio is checked. Now I need to figure out how to get value from select box when radio is clicked and displayed and select has been selected? – Budimir Dec 26 '16 at 18:29