Check if select has been selected except default value

Question

I have a select box with 30 values, one of them is 'selected' by default. What I need to do is if anything but the 'selected' value is selected change a variable to true.

     $('.secondNext').click(function(){
      var vali_field = $(".udf-selection option:selected").val(),
      id = $('.hiddenRuleID').val(),
      tranType = [],         
      ruleStep = 'step2',
      tranTypeSel = false,
      validFieldSel = false;

      $('.checkboxGroup input[type="checkbox"]').each(function() {
          if ($(this).is(":checked")) {
              tranTypeSel = true;

          }
      });
        if (tranTypeSel == false) {
          $('.secondNext').removeClass('next');
          $('.tranTypeError').show();
          $('.tranTypeError').text('* Please select a transaction type');              
          alert('Please select at least one checkbox');
          return false;            
        }
        if (valiFieldSel == false) {
          $('.secondNext').removeClass('next');
          $('.udfError').show();
          $('.udfError').text('* Please select a UDF');   
          alert('Please select at least one udf'); 
          return false;            
        }            

      $('input[name=tranType]:checked').each(function() {
          tranType.push($(this).val());
      }); 

      $.ajax({
          url: 'ajax/updateNewRule.php',
          type: 'POST',
          data: {
            id: id,
            vali_field: vali_field,
            tranType: tranType,
            ruleStep: ruleStep
          }
      })
      .done(function(data) {

      })
    })

I have tried the above but it thinks there is something selected because one of the values has the selected attribute.

UPDATE

Heres the scenario in a fiddle - http://jsfiddle.net/csLAk/8337/

You might want to consider looking into [the `change` event](https://developer.mozilla.org/en-US/docs/Web/Events/change). This event is fired whenever a selection is made in a ` — Lix, May 10 '16 at 13:38

score 1 · Answer 1 · answered May 10 '16 at 13:41

Save selected value on load, than on change check if value differs:

$(document).ready(function() {
  $('select').each(function() {
    $(this).data('selected', $('option:selected', this).val());
  });

  $('select').change(function() {
    if ($(this).val() != $(this).data('selected')) {
      $(this).parent().css({
        'border-color': 'green'
      });
    } else {
      $(this).parent().css({
        'border-color': 'red'
      });
    }
  })
})

div {
  float: left;
  border: 2px solid transparent;
}
select {
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
    <option value="f" selected="selected">f</option>
    <option value="g">g</option>
    <option value="h">h</option>
    <option value="i">i</option>
    <option value="j">j</option>
    <option value="k">k</option>
  </select>
</div>

@Lix Look at my edit, this variable 'valiFieldSel' is being set on click so on change doesn't work. — Kieron606, May 10 '16 at 13:49
@Kieron606 Your fiddle is copy of salman bukhari answer and has nothing to do with your question — Justinas, May 11 '16 at 05:30

score 1 · Answer 2 · answered May 10 '16 at 13:44

1

If I understand the question correctly, you have a value that is selected via a radio button or similar means that is selected on page load and you want to process if something other than the default value is selected. If this is so you may be able to do something like this (I am unable to test this at the moment)

Try to change:

if ($(this).is(":checked"))

to

if ($(this).is(":checked") && $(this).val() != `enter default value here`)

That should check that the logic returns false on the default value.

answered May 10 '16 at 13:44

xec86

1,291
1
11
17

With your code you have to have different `if ()` for each select element. Am I right? – Justinas May 10 '16 at 13:47
if there is only one default value then the above code will work for everything that is not the default value, however, if there are situations where the default value is different, this is not an efficient solution. – xec86 May 10 '16 at 13:50
Yes, like having 5 select boxes in page... (that is common scenario) – Justinas May 10 '16 at 13:53
What if we make the change and click two seperate actions. http://jsfiddle.net/csLAk/8343/ – xec86 May 10 '16 at 14:20
1

Or even better what if we take the default value of the select box on page ready so that we can tell if something was selected then they reverted back to the default selection. http://jsfiddle.net/csLAk/8352/ – xec86 May 10 '16 at 14:33

score -1 · Answer 3 · edited May 10 '16 at 17:22

-1

You can do something like this

var someVariable = false;
$('select').on('change', function() {
  someVariable = true;
});

edited May 10 '16 at 17:22

Sam Hanley

4,707
7
35
63

answered May 10 '16 at 13:44

salman bukhari

44
8

Check out this fiddle http://jsfiddle.net/csLAk/ from http://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange – salman bukhari May 10 '16 at 13:45
It will always changes `someVariable` to `true`. How you decide when element value changed? – Justinas May 10 '16 at 13:45
You mean when text inside an option tag is changed? – salman bukhari May 10 '16 at 13:50
When I select from default `1` to `2` from dropdown – Justinas May 10 '16 at 13:53
the scenario you have mentioned will always return false. – salman bukhari May 10 '16 at 14:11
var defaul_item = $('select').find(":selected").text(); var valueSet = false; $('select').on('change', function() { if($('select').find(":selected").text() != defaul_item){ defaul_item = $('select').find(":selected").text(); valueSet = true; } alert(valueSet); }) – salman bukhari May 10 '16 at 14:11
try this. I hope it helps – salman bukhari May 10 '16 at 14:12

Check if select has been selected except default value

3 Answers3