Sunday, February 12, 2012

jQuery Select list, selected text value rather than the value


building on my last question jQuery getting values from multiple selects together



I have the select list like:




<select name="access" class="change" id="staff_off" runat="server">
<option value="8192">Off</option>
<option value="8192">On</option>
</select>



And I basically want to add or subtract the value of the options if it's off, subtract if it's on add it. It's going to be stored in a cookie (it uses bitwise)



The jquery I have is:




<script>

$(document).ready(function(){
var currentAccess = $.cookie("access");
})

$("select").change(function () {
var currentText = $(this).text()
var value = $(this).val()

$.cookie("access", value, { expires: 24 });

alert(currentText);

alert( $.cookie("access") );

})

</script>



I'll do the addition in the change function. The thing I can't work out is how to get the text of the select to do an if statement (so if it's yes, add the value, if it's no, subtract the value)



Tom

3 comments:

  1. If you're looking for the inner text of the selected <option> element, you can use the :selected selector to match it, then call the text() method:

    var currentText = $(this).find(":selected").text();


    Or, alternatively:

    var currentText = $(":selected", this).text();

    ReplyDelete
  2. To get the text of the selected item:

    var value = $("#staff_off :selected").text();


    I'd also suggest (if you're using HTML5) that using the data-x attribute to store the flag whether to add or subtract the value would be more semantic. Like this:

    <select name="access" class="change" id="staff_off" runat="server">
    <option value="8192" data-factor="-1">Off</option>
    <option value="8192" data-factor="1">On</option>
    </select>


    Then to get your final value to apply to the total you simply multiply the value by the data-factor attribute.

    ReplyDelete
  3. You can use this $("#staff_off").find("option:selected").html();

    ReplyDelete