locked
Showing selected item from selectlist in html RRS feed

  • Question

  • User-234026806 posted

    Hi There;

    I would like to show selected item from selectlist with surrounding rectangle next to selectlist. For example, assume that there is a selectlist that contains "volvo", "saab", "mercedes" and "audi". When user selects "audi", a rectangle that "audi" in it shall be appeared. How can I do this, what shall be the keywords for this purpose?

    Thanks in advance.

    Friday, October 5, 2018 10:49 AM

Answers

  • User839733648 posted

    Hi varoulscuprens,

    According to your description, I suggest that you could set a textarea as the rectangle.

    And then you may show the selected item in it with JS code.

    I've made a sample on my side and for more details, you could refer to the code below.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("textarea").hide();
                var selectBox = document.getElementById("selectlistID");
                selectBox.onchange = function () {
                    var textbox = document.getElementById("textareaID");
                    textbox.value = this.value;
                    $("textarea").show();
                };
            })
        </script>
    </head>
    <body>
        <select name="selectlist" id="selectlistID">
            <option selected>Select</option>
            <option>volvo</option>
            <option>saab</option>
            <option>mercedes</option>
            <option>audi</option>
        </select>
        <textarea id="textareaID" rows="1"></textarea>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 8, 2018 2:59 AM

All replies

  • User839733648 posted

    Hi varoulscuprens,

    According to your description, I suggest that you could set a textarea as the rectangle.

    And then you may show the selected item in it with JS code.

    I've made a sample on my side and for more details, you could refer to the code below.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("textarea").hide();
                var selectBox = document.getElementById("selectlistID");
                selectBox.onchange = function () {
                    var textbox = document.getElementById("textareaID");
                    textbox.value = this.value;
                    $("textarea").show();
                };
            })
        </script>
    </head>
    <body>
        <select name="selectlist" id="selectlistID">
            <option selected>Select</option>
            <option>volvo</option>
            <option>saab</option>
            <option>mercedes</option>
            <option>audi</option>
        </select>
        <textarea id="textareaID" rows="1"></textarea>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 8, 2018 2:59 AM
  • User-234026806 posted

    Thank you Jenifer.

    Friday, October 12, 2018 11:52 AM