Member Avatar for PF2G

Hi,

how can i know (with an alert) the value i selected, from the #layout_select:

    <script>
                $(document).ready(function() {
                    var optarray = $("#layout_select").children('option').map(function() {
                        return {
                            "value": this.value,
                            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
                        }
                    })

                    $("#column_select").change(function() {
                        $("#layout_select").children('option').remove();
                        var addoptarr = [];
                        for (i = 0; i < optarray.length; i++) {
                            if (optarray[i].value.indexOf($(this).val()) > -1) {
                                addoptarr.push(optarray[i].option);
                            }
                        }
                        $("#layout_select").html(addoptarr.join(''));
                    }).change();
                });
            </script>


            <select name="column_select" id="column_select">
                    <option value="col1">Com partida em</option>
                    <option value="col2">Albufeira</option>
                    <option value="col3">Braga</option>
                    <option value="col4">Lisboa</option>
                    <option value="col5">Porto</option>
                    <option value="col6">Vigo</option>
                </select>

                <br/><br/>


                <select name="layout_select" id="layout_select" >
                    <!--Below shows when '1 column' is selected is hidden otherwise-->
                    <option value="col1_none">Com destino em</option>

                    <!--Below shows when '2 column' is selected is hidden otherwise-->
                    <option value="col2_none">Com destino em</option>
                    <option value="col2_braga">Braga</option>
                    <option value="col2_lisboa">Lisboa</option>
                    <option value="col2_porto">Porto</option>
                    <option value="col2_vigo">Vigo</option>

                    <!--Below shows when '3 column' is selected is hidden otherwise-->
                    <option value="col3_none">Com destino em</option>
                    <option value="col3_albufeira">Albufeira</option>
                    <option value="col3_lisboa">Lisboa</option>
                    <option value="col3_porto">Porto</option>
                    <option value="col3_vigo">Vigo</option>

                    <!--Below shows when '4 column' is selected is hidden otherwise-->
                    <option value="col4_none">Com destino em</option>
                    <option value="col4_albufeira">Albufeira</option>
                    <option value="col4_braga">Braga</option>
                    <option value="col4_porto">Porto</option>
                    <option value="col4_vigo">Vigo</option>

                    <!--Below shows when '5 column' is selected is hidden otherwise-->
                    <option value="col5_none">Com destino em</option>
                    <option value="col5_albufeira">Albufeira</option>
                    <option value="col5_braga">Braga</option>
                    <option value="col5_lisboa">Lisboa</option>
                    <option value="col5_vigo">Vigo</option>

                    <!--Below shows when '6 column' is selected is hidden otherwise-->
                    <option value="col6_none">Com destino em</option>
                    <option value="col6_albufeira">Albufeira</option>
                    <option value="col6_braga">Braga</option>
                    <option value="col6_lisboa">Lisboa</option>
                    <option value="col6_porto">Porto</option>
                </select>

Hope you can help me.

Thank you,
PF2G

Edited by pritaeas because: Moved to Javascript.
  • 2 Contributors
  • 2 Replies
  • 410 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by PF2G
Member Avatar for PF2G

Sorry, i wasn't clear enough... I want to refresh the <p> text everytime i change the #layout_select

<script>
            $(document).ready(function() {
                var optarray = $("#layout_select").children('option').map(function() {
                    return {
                        "value": this.value,
                        "option": "<option value='" + this.value + "'>" + this.text + "</option>"
                    }
                })

                $("#column_select").change(function() {
                    $("#layout_select").children('option').remove();
                    var addoptarr = [];
                    for (i = 0; i < optarray.length; i++) {
                        if (optarray[i].value.indexOf($(this).val()) > -1) {
                            addoptarr.push(optarray[i].option);
                        }
                    }
                    $("#layout_select").html(addoptarr.join(''));
                }).change();


                var myString = $("#layout_select").val();
                var myArray = myString.split('_');

                $("p#val").text(myArray[1]);
            });
        </script>

        <p id="val"></p>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.