CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
noel293
noel293

Reputation: 504

check if the values in an array are the same as the values as the values of a selectbox?

Is it possible to check if there is a match between values inside and array and values of a select box? I need to check if the value of the select box is in the array so if it is I can change its class to something else. noobie here

EDIT

I have been working on recreating my question so it can be more understandable. On this fiddle here you can see that I am dynamically creating new selectboxes using a button! In each of the buttons, the selection is being disabled but only for that box. What I want to do is that if one value is selected all of the others will be deactivated, in all the other boxes. I tried insert in an array all the values of the selected values and then compare them in order to disable them but I only managed to do it in each box. ALSO the data from the selectboxes come from a database! any tips?

//this supposed to disable the selected options

$('#sig_3').on('change', '.c_service_c', function() {
  var value = $('#type').val();
  var selected_array = [];

  $('.c_service_c option:selected').each(function() {
    if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
      selected_array.push($(this).val()); //save selected values so that they can be disabled later
    }
  });

  console.log('print: ' + selected_array);
  //reset all values to 'Y' before changing selected to 'N'
  $('.c_service_c option').each(function() {
    if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
      $('.c_service_c option').addClass('Y'); //resetting all options to 'Y'
    }
  });

  if (selected_array.indexOf($('.c_service_c').val()) > -1) {
    $('.c_service_c option:selected').removeClass('Y');
    $('.c_service_c option:selected').addClass('N');
    console.log('it prints here too');
  }

  //disable all selected values in options array
  if (selected_array.indexOf($(this).val()) > -1) {
    $('.c_service_c option:selected').removeClass('Y');
    $('.c_service_c option:selected').addClass('N');
    console.log('it prints');
  }

  //disable all selected values
  $('.c_service_c option').each(function() {
    if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
      if ($(this).hasClass('N')) {
        $(this).attr("disabled", true);
        $(this).removeClass('N');
      } else {
        $(this).addClass('Y');
        $(this).attr("disabled", false);
      }
    }
  });
});

Upvotes: 0

Views: 54

Answers (2)

cнŝdk
cнŝdk

Reputation: 32145

If you want for each options to check if the option exists in an array, and based on to disable it or not, you just need to loop over the options using .each() function and do your check.

This is how should be your code:

$("#dropdown option").each(function() {
  if (arr.indexOf($(this).val()) > -1) {
    $(this).attr('disabled', true);
  }
});


var arr = ["apple", "tomato", "peach", "pineapple"];


$("#dropdown option").each(function() {
  if (arr.indexOf($(this).val()) > -1) {
    $(this).attr('disabled', true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<select id="dropdown">
  <option value="apple">Apples</option>
  <option value="orange">Oranges</option>
  <option value="pineapple">Pineapple</option>
  <option value="lemon">Lemon</option>
</select>

Edit:

I updated your fiddle so it's working now, your problem was that you declared selected_array in a local scope for $().each() it needs to be declared as global.

Upvotes: 1

xili
xili

Reputation: 23

Assuming you're using jQuery as well, and assuming I understand correctly what you are asking, try the following:

//available values
var arr = ["apple", "tomato", "peach", "pineapple"];

$("#select-dropdown").on("change", function() {
  //store value on local variable
  var value = $(this).val();

  //search the value inside the array, return -1 if can't find
  var index = arr.indexOf(value);

  if (index != -1) {
    //found value in array, add the new class!
    $(this).addClass("my-new-class");
  } else {
    //didnt found anything, remove class
    $(this).removeClass("my-new-class");
  }
});
.my-new-class{
  background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select-dropdown">
  <option value="apple">Apples</option>
  <option value="orange">Oranges</option>
  <option value="pineapple">Pineapple</option>
</select>

Upvotes: 0

Related Questions