CODEWITHSUNDEEP
javascriptjqueryasp.net
MissCoder87
MissCoder87

Reputation: 2669

jQuery getting values from multiple selects together

I've got the following code which basically when the value of the select is changed I want to be able to take the new value and add it to the already existing value (or minus it).

I'm having an issue actually grabbing the value. I have this to create the select lists:

      <li class="extraHeight">
    <asp:Image runat="server" CssClass="iconImageMove" ID="Image14" ImageUrl="~/images/icons/carpark_off.png" />
    <div class="flipWidth">
        <select name="access" class="change" id="carpark_off"  runat="server">
            <option value="0">Off</option>
            <option value="256">On</option>
        </select>
     </div> <br /> <p class="noWrap">Accessible Car parking facilities</p>
</li>

        <li class="extraHeight">
    <asp:Image runat="server" CssClass="iconImageMove" ID="Image15" ImageUrl="~/images/icons/parking_off.png" />
    <div class="flipWidth">
        <select name="access" class="change" id="parking_off"  runat="server">
            <option value="0">Off</option>
            <option value="33554432">On</option>
        </select>
     </div> <br /> <p class="noWrap">Customer Car parking facilities</p>
</li>

        <li class="extraHeight">
    <asp:Image runat="server" CssClass="iconImageMove" ID="Image16" ImageUrl="~/images/icons/staff_off.png" />
    <div class="flipWidth">
        <select name="access" class="change" id="staff_off"  runat="server">
            <option value="0">Off</option>
            <option value="8192">On</option>
        </select>

(There are a lot more but that gives you an idea)

I'm using the following jQuery to detect the change and try and grab the value but it's not working:

<script>

    var value = $("select").val()
    $("select").change(function () {
          alert(value);
        })

</script>

Any suggestions would really be appreciated!

Tom

Upvotes: 1

Views: 479

Answers (6)

pete
pete

Reputation: 25081

Try:

<script>
    $(document).ready(function () {
        $("select").change(function () {
            var value = $(this).val();
            alert(value);
        });
    });
</script>

which will attach your change handler to the select elements after the DOM has loaded them. Also, the value should be scoped in the handler, or the value will not necessarily be updated when other select elements fire the change event.

Upvotes: 0

Mariusz Jamro
Mariusz Jamro

Reputation: 31653

First of all wrap your script in $(document).ready(), so that it will be executed after the page loaded. Secondly get the value of select inside the callback:

$(document).ready(function(){
  var value = $("select").val()
    $("select").change(function () {
          alert($(this).val());
    });
})

Upvotes: 0

gideon
gideon

Reputation: 19465

You would do something like this:

$("select").change(function () {
      alert($(this).val());
 })

You are only getting the value out once and then just displaying the same thing on the change event.

See working demo : http://jsfiddle.net/JsKeS/

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

Calling var value = $("select").val() will save the value of the first <select> element matched by the selector into a variable as it was when that code was run - it won't update when you change the value of that element.

Instead, what you can do is use this inside your change() callback function to refer to the <select> element that has changed, and get its value, like this:

$("select").change(function () {
    alert(this.value);
});

Upvotes: 1

Nealv
Nealv

Reputation: 6884

You set your value before the change try this:

<script>
    $("select").change(function () {
          var value = $(this).val()
          alert(value);
        })

</script>

Upvotes: 1

yan.kun
yan.kun

Reputation: 6908

You are only selecting the initial value. You need to get the value inside the change event.

$("select").change(function () {
 var value = $(this).val()
 alert(value);
})

Upvotes: 3

Related Questions