CODEWITHSUNDEEP
javascriptjqueryhtmldropdown
qwww
qwww

Reputation: 1363

How to validate this condition?

I have two dropdowns like this : 

 <select class="form-control" name='start'>
        <option selected disabled hidden value="">start</option>

    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>

</select>


<select class="form-control" name='end'>
    <option selected disabled hidden value="">end</option>


    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

If someone selects one value from dropdown 1,say some 6 he can select the next value from end if and only if values are continuously present.

Let the values in dropdown 1 be : 1,2,3,4,5,6 Let the values in dropdown 2 be : 1,2,3,4,5,9,10,11

lets say someone selected 3 in dropdown1 then he can select 4 or 5 from drop down 2 and not 9 since it is not continuous(so there should be a alert) lets say someone selected 6 in dropdown1 then he can't select 9 or above from drop down 2 (so there should be a alert)

What has to be done?

Upvotes: 2

Views: 91

Answers (3)

Takit Isy
Takit Isy

Reputation: 10081

If I understand correctly your request,
I think this is the kind of thing you want to achieve:
(See comments in my code for details)

$("select[name=start]").change(function() { // On change of the first select
  var start = +$(this).val(); // Get selected value as number
  var end, end_1 = 1;         // Initialize values for 2nd select

  // Select the "disabled" value on the 2nd select,
  // and disable all the options.
  $('select[name=end]').val('');
  $('select[name=end] option').prop('disabled', true);
  
  // For each option, except the first one
  $('select[name=end] option:not(:first-of-type)').each(function() {

    end = +$(this).val(); // Get value as number
    if (
      (end != end_1 + 1)  // Detect if there's a gap
      &&                  // AND
      (end_1 > start)     // Previous value is above start
    ) {
      return false;       // Exit function
    }
    
    // The below is executed if the function is not exited
    end_1 = end;          // Put current value in previous
    if(end > start){      // If current is above start…
      $(this).prop('disabled', false); // … enable this option!
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name='start'>
  <option selected disabled hidden value="">start</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>

<select class="form-control" name='end'>
  <option selected disabled hidden value="">end</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
</select>

Note that I didn't modify anything in your HTML to make it work.
Feel free to comment if I'm wrong, or if you want me to modify something.

Hope it helps.

Upvotes: 1

wiesion
wiesion

Reputation: 2455

I find your question rather confusing (you fail to explain the conditions properly), but with this generic approach you can define the values however you want to within HTML, and have multiple selects that behave like this on the same DOM. The code should be self-explanatory.

$(document).on('ready', function() {
  $('select.start-to-end').each(function() {
    var endTarget = $($(this).data('targetEnd')),
        endOptions = $('option', endTarget);
    $(this).on('change', function() {
      var allowed = $('option:selected', this).data('allowEnd').toString().split(',');
      endOptions
        .prop('disabled', true)
        .filter(function() {
          return allowed.indexOf($(this).val()) > -1
        })
        .prop('disabled', false);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select class="form-control start-to-end" name='start1' data-target-end="select[name=end1]">
    <option selected disabled value="">start</option>
    <option value="1" data-allow-end="2">1</option>
    <option value="2" data-allow-end="3">2</option>
    <option value="3" data-allow-end="2,4">3</option>
    <option value="4" data-allow-end="3,5">4</option>
    <option value="5" data-allow-end="4,6">5</option>
    <option value="6" data-allow-end="5,7">6</option>
    <option value="7" data-allow-end="6,8">7</option>
    <option value="8" data-allow-end="7,9">8</option>
    <option value="9" data-allow-end="8,10">9</option>
    <option value="10" data-allow-end="9,11">10</option>
</select>

<select class="form-control" name='end1'>
    <option selected disabled value="">end</option>
    <option disabled value="2">2</option>
    <option disabled value="3">3</option>
    <option disabled value="4">4</option>
    <option disabled value="5">5</option>
    <option disabled value="6">6</option>
    <option disabled value="7">7</option>
    <option disabled value="8">8</option>
    <option disabled value="9">9</option>
    <option disabled value="10">10</option>
    <option disabled value="11">11</option>
</select>

Upvotes: 3

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

Is this what you are looking for?

$("select[name=start]").change(function() {
  var itemsFound = $(this).val();
  itemsFound = parseInt(itemsFound, 10);
  $('select[name=end] option').each(function() {
    currentItem = parseInt($(this).text(), 10);
    if (currentItem <= itemsFound) {
      $(this).hide();
    }
  });
});

Demo

$("select[name=start]").change(function() {
  var itemsFound = $(this).val();
  itemsFound = parseInt(itemsFound, 10);
  $('select[name=end] option').each(function() {
    currentItem = parseInt($(this).text(), 10);
    if (currentItem <= itemsFound) {
      $(this).hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name='start'>
  <option selected disabled hidden value="">start</option>

  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>

</select>


<select class="form-control" name='end'>
  <option selected disabled hidden value="">end</option>


  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
</select>

Upvotes: 0

Related Questions