CODEWITHSUNDEEP
javascripthtmljqueryhtml-select
wcyat
wcyat

Reputation: 77

Can't change HTML dropdown list value

I created a site: pg.wcyat.me (Source code), using github.com/thdoan/pretty-dropdowns for dropdown lists. I can change the value of select lists, using javascript, e.g.:

document.getElementById('numbers').value = "false"
$dropdown.refresh()

then the "include numbers" list would show false.

However, if I change in the interface (changing "include numbers" from "true" (initial value) to "false" using the dropdown list), then:

document.getElementById('numbers').value
//returns "true"

if I refresh it:

$dropdown.refresh()

the "include numbers" list would show "true", as if I have never changed the option.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="https://static.wcyat.me/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="https://pg.wcyat.me/assets/css/input.css" />
        <link rel="stylesheet" type="text/css" href="https://pg.wcyat.me/assets/css/main.css" />
        <link rel="stylesheet" type="text/css" href="https://pg.wcyat.me/assets/css/prettydropdowns.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://static.wcyat.me/js/init.js"></script>
    </head>
    <body>
        <main>
            <center>
                <h1 style="background-color: black; color: white; height: 150px; width: 100%; padding-top: 50px;" id="output"></h1>
                <div class="iota">
                    <button class="btn btn-primary" style="font-size: large;" onclick="copy()" id="copy">Copy</button>
                    <button class="btn btn-primary" style="font-size: large;" onclick="document.getElementById('output').innerHTML = generate(); document.getElementById('copy').innerHTML = 'Copy'" value="Generate">Generate</button>
                </div>
            <div>
                <h1><strong>Options</strong></h1>
                <label style="margin-left: 10px;" for="numbers">Include numbers</label>
                <label style="margin-left: 20px" for="upper">Include uppercase characters</label>
                <label style="margin-left: 20px" for="lower">Include lowercase characters</label>
                <label style="margin-left: 20px" for="special">Include special characters</label><br>
                <select id="numbers" name="numbers" onchange="change('numbers')">
                    <option value="true">true</option>
                    <option value="false">false</option> 
                </select>
                <select style="margin-left: 60px;" id="upper" name="upper" onchange="change('upper')">
                    <option value="true">true</option>
                    <option value="false">false</option> 
                </select>
                <select style="margin-left: 80px;" id="lower" name="lower" onchange="change('lower')">
                    <option value="true">true</option>
                    <option value="false">false</option> 
                </select>
                <select style="margin-left: 60px;" id="special" name="special" onchange="change('special')">
                    <option value="true">true</option>
                    <option value="false">false</option> 
                </select>
            </div>
            </center>
            </section>
        </main>
        <script src="https://pg.wcyat.me/assets/js/jquery.prettydropdowns.js"></script>
        <script src="https://pg.wcyat.me/assets/js/pg-web.js"></script>
        <script src="https://pg.wcyat.me/assets/js/copy.js"></script>
        <script src="https://pg.wcyat.me/assets/js/select.js"></script>
        <script>
            $(document).ready(function() {
              $dropdown = $('select').prettyDropdown();
            });
        </script>
    </body>
</html>

Upvotes: 0

Views: 343

Answers (1)

hassan zarghami
hassan zarghami

Reputation: 179

function selected() {
    for (let i in options.include) {
        document.getElementById(i).value = options.include[i]
    }
}

function change(v) {
    options.include[v] = !options.include[v]
}

Upvotes: 1

Related Questions