Getting value from select drop-down

Question

I'm creating a criteria with 3 rate selection. Now the problem when I'd tried to dd in my controller? The return is null.

Anyone knows what is wrong in my JavaScript code? Sorry, because I'm not so familiar with JavaScript.

$('select').on('change', function() {
  selected = [];

  $('select').each(function() {
    if ($(this).val() !== "No Match")
      selected.push($(this).find('option:selected').val());
  });

  console.log(selected);

  $('select').children().each(function(index) {
    if ($.inArray($(this).val(), selected) !== -1) {
      $(this).attr('disabled', true);
    } else {
      $(this).attr('disabled', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>

<h4>Criteria</h4>
<div class="col-md-12 well">
  <div class="col-lg-12 form-group">
    <div class="col-lg-5">
      <label class="control-label">
        Age from:
      </label>
      <input type="text" name="ship_age_from" class="form-control">
    </div>
    <div class="col-lg-4">
      <label class="control-label">
        Age to:
      </label>
      <input type="text" name="ship_age_to" class="form-control">
    </div>
    <div class="col-lg-3">
      <label class="control-label">
        Rate:
      </label>
      <select name="ship_rate_one">
        <option>No Match</option>
        <option value="0">Choose</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </div>
  </div>
  <div class="col-lg-12 form-group">
    <div class="col-lg-5">
      <label class="control-label">
        GPA from:
      </label>
      <input type="text" name="ship_gpa_from" class="form-control">
    </div>
    <div class="col-lg-4">
      <label class="control-label">
        GPA to:
      </label>
      <input type="text" name="ship_gpa_to" class="form-control">
    </div>
    <div class="col-lg-3">
      <label class="control-label">
        Rate:
      </label>
      <select name="ship_rate_two">
        <option>No Match</option>
        <option value="0">Choose</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </div>
    <div class="col-lg-3">
      <label class="control-label">
        School Level:
      </label>
      <select name="ship_level">
        <option>No Match</option>
        <option value="0">Choose</option>
        <option value="Primary">Primary</option>
        <option value="Secondary">Secondary</option>
        <option value="Tertiary">Tertiary</option>
      </select>
    </div>
    <div class="col-lg-6 form-group">
      <label class="control-label">
        Rate:
      </label>
      <select name="ship_rate_three">
        <option>No Match</option>
        <option value="0">Choose</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </div>
  </div>
</div>

Could you be more precise with what you mean "tried to dd in my controller"? Do you want to pass the `selected` to the controller for further evaluation? — SaschaM78, Jan 03 '17 at 14:05
what does "dd in my controller" mean? The Javascript looks ok in itself, but it's not clear what your actual goal is. — ADyson, Jan 03 '17 at 14:10
@SaschaM78 - dd is just like checking the value of the select.So its like vardump in php.You right i want to pass the value in the controller. — Gatzmar, Jan 03 '17 at 14:33
@ADyson - dd is like vardump in php.I want to pass the value of the select in my controller but the value is null. — Gatzmar, Jan 03 '17 at 14:37
"the value is null". Which value? There are multiple selects here - you want the value of all of them? The javascript seems to work ok and get the selected values of them all, otherwise the disabling of the value in the other selects would not work. Show us how you are passing the selected value to the controller. Nothing in this code demonstrates that. — ADyson, Jan 03 '17 at 14:40
The only possible problem I can foresee is that you are disabling the value in all selects, even if it's the currently selected value. Disabled elements don't get submitted to the server in a postback. — ADyson, Jan 03 '17 at 14:46
@Mr.Polywhirl - Sir this link jQuery Get Selected Option From DropdownjQuery Get Selected Option From Dropdown is different from the situation i have now.This time i want to save the value of each 3 selected values.The same concept that each selection is unique but how come when i pass and get each value in the controller is null. — Gatzmar, Jan 03 '17 at 14:51
I'm thinking the same disable thing. You should not disable the selected values!. (Unless you plan to send the values via Ajax to the controller, in which caase you manually specify the selected var). — Leonel Atencio, Jan 03 '17 at 14:52
@ADyson - You are correct because of the disabled but how can i resolve this problem since i want to get each value.The reason why there is attr disabled is that the value of current selection is not available in the next selection. — Gatzmar, Jan 03 '17 at 15:02
@Gatzmar the solution would be don't run the disabling script against the select which triggered the change event. Or another way would be to check if the option you are trying to disable is also the selected option in the select, and if so, don't disable it. — ADyson, Jan 03 '17 at 15:05

Getting value from select drop-down

0 Answers0