locked
dropdownlist should change its value upon selection RRS feed

  • Question

  • User219039814 posted

    I have a dropdown list with three values.. and three text boxes.

    Once a value is selected from the dropdown, it should enter into the first textbox.

    then automatically, the dropdown should remove the selected value.

    agian upon selection. the second text box should populate with selected value and dropdown should automatically remove the selected value.

    the last value in dropdown should automatically populate its value in the third textbox .

    can anyone help me

    Friday, May 11, 2018 5:36 AM

Answers

  • User61956409 posted

    Hi vijaylakshmi,

    To achieve your requirement: populate three text boxes with three dropdown list options, I created the following sample for you, you can try it.

    Html code:

    <select id="myddl">
        <option>--select option--</option>
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
    </select>
    <br />
    <input id="Text1" type="text" /><input id="Text2" type="text" /><input id="Text3" type="text" />

    JS code:

    $(function () {
        $("#myddl option").click(function () {
    
            var selectedtext = $(this).text();
    
            if (selectedtext != "--select option--") {
                var count = $("#myddl option").length;
                switch (count) {
                    case 2:
                        $("#Text3").val(selectedtext);
                        $(this).remove();
                        break;
                    case 3:
                        $("#Text2").val(selectedtext);
                        $(this).remove();
                        break;
                    case 4:
                        $("#Text1").val(selectedtext);
                        $(this).remove();
                        break;
                }
            }
        })
    })

    Test result:

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 12, 2018 6:56 AM

All replies

  • User-369506445 posted

    hi

    please try below code :

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(function () {
                $('select').on('change', function () {
                    var $txt1 = $("#txt1");
                    var $txt2 = $("#txt2");
                    var $txt3 = $("#txt3");
    
                    debugger;
                    if ($txt1.val() == "" && $txt2.val() == "" && $txt3.val() == "") {
                        $txt1.val(this.value);
                        return;
                    }
    
                    if ($txt1.val() != "") {
                        clear();
                        $txt2.val(this.value);
                        return;
                    }
                    if ($txt2.val() != "") {
                        clear();
                        $txt3.val(this.value);
                        return;
                    }
                    if ($txt3.val() != "") {
                        clear();
                        $txt1.val(this.value);
                        return;
                    }
                });
    
                function clear() {
    
                    $('input[type=text]').each(function () {
                        $(this).val('');
                    });
                }
            })
        </script>
    </head>
    <body>
    
        <select>
            <option>Option 1 </option>
            <option>Option 2 </option>
            <option>Option 3 </option>
        </select>
        <br />
        <input type="text" id="txt1" /><br />
        <input type="text" id="txt2" /><br />
        <input type="text" id="txt3" /><br />
    </html>

    also you can try it id FiddleJS

    Fiddle example

    Friday, May 11, 2018 7:49 AM
  • User61956409 posted

    Hi vijaylakshmi,

    To achieve your requirement: populate three text boxes with three dropdown list options, I created the following sample for you, you can try it.

    Html code:

    <select id="myddl">
        <option>--select option--</option>
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
    </select>
    <br />
    <input id="Text1" type="text" /><input id="Text2" type="text" /><input id="Text3" type="text" />

    JS code:

    $(function () {
        $("#myddl option").click(function () {
    
            var selectedtext = $(this).text();
    
            if (selectedtext != "--select option--") {
                var count = $("#myddl option").length;
                switch (count) {
                    case 2:
                        $("#Text3").val(selectedtext);
                        $(this).remove();
                        break;
                    case 3:
                        $("#Text2").val(selectedtext);
                        $(this).remove();
                        break;
                    case 4:
                        $("#Text1").val(selectedtext);
                        $(this).remove();
                        break;
                }
            }
        })
    })

    Test result:

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 12, 2018 6:56 AM