CODEWITHSUNDEEP
jquery
Danienllxxox
Danienllxxox

Reputation: 423

jQuery determine which <option> is selected

I Have my select box:

 <select name="in_slider" id="in_slider">
     <option value="1">Yes</option>
     <option value="0" selected="selected">No</option>
 </select>

As you can see there are two of them and one is already selected (It needs to be defaulted to this selection so that it is processed correctly when passed to the database)

Underneath I have another select and options, exactly the same code just with a different name and id.

When the user, clicks the first select option and changes the value to Yes(1) I need the second select to hide()

I have tried:

$(document).ready(function() {
    var selectedoption = $('#in_slider').val();
    var valueistrue = "1";

    if (selectedoption == valueistrue) {
        $('#selectboxtwo').hide();  
    }
});

But to no avail. :(

Because there is already a value selected it runs the moment the page loads and I cant let that happen as initially the second select needs to be visible.

JsFiddle = http://jsfiddle.net/WwnbG/

Upvotes: 0

Views: 92

Answers (6)

Dhaval
Dhaval

Reputation: 2861

Please look at fiddle 

$(document).ready(function() {


    $( "#in_slider").change(function() {

    var selectedoption = $('#in_slider').val();

    var valueistrue = "1";

    if (selectedoption == valueistrue) {
        $('#in_stock').hide();

    }
});



});

Upvotes: 1

Sachin
Sachin

Reputation: 40970

You need to call the change function of first select option and then write your code inside that.

$('#in_slider').change(function () {
   var selectedoption = $('#in_slider option:selected').val();
   var valueistrue = "1";

   if (selectedoption == valueistrue) {
      $('#selectboxtwo').hide();
   }
});

JS Fiddle Example

Your Fiddle Example

Upvotes: 1

ajtrichards
ajtrichards

Reputation: 30565

To get the selected value:

var selected_value = $("#in_slider option:selected").val();

or to get the text of the selection:

var selected_text = $("#in_slider option:selected").text();

I've editted your JSFiddle:

http://jsfiddle.net/WwnbG/13/

<div class="section-price-ch-third">
    <p>Display in slider?</p>
    <select name="in_slider" id="in_slider">
        <option value="1">Yes</option>
        <option value="0" selected="selected">No</option>
    </select>
</div>

<div class="section-price-ch-third">
    <p>In Stock?</p>
    <select name="in_stock" id="in_stock">
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>
</div>

<script type="text/javascript">
$("#in_slider").change(function(){

    var selectedoption = $("#in_slider option:selected").val();
    var valueistrue = "1";

    if (selectedoption == valueistrue) {
        $('#in_stock').hide();
    }else{
        $('#in_stock').show();
    }

});
</script>

Upvotes: 0

RONE
RONE

Reputation: 5485

$(document).ready(function() {
    var selectedoption = $('#in_slider :selected').val();
    var valueistrue = $('<checkbox name> :checked').val(); ex: $('input[name=check] :checked').val()

    if (selectedoption == valueistrue) {
       $('#in_slider option[value=0]').hide();
    }
});

Your query: "I need the second select to hide()". do you mean the second select option should be disabled/hidden?

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

try

  var selected = $('#in_slider option:selected');

Upvotes: 1

roullie
roullie

Reputation: 2820

$('#in_slider option:selected').text()

Upvotes: 0

Related Questions