开发者

adding stuff to a jquery listbox

开发者 https://www.devze.com 2023-04-04 20:47 出处：网络
i am using this demo: http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html i would like to know how to be able to add a datasource to this list:
相关专题：asp.netjavascriptjquery

i am using this demo:

http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html

i would like to know how to be able to add a datasource to this list:

<select size="4" name="languages[]" id="languages" multiple="multiple">

                    <option value="English">English</option>

                    <option value="French">French</option>

                    <option value="Spanish">Spanish</option>

                    <option value="Italian">Italian</option>

                    <option value="Chinese">Chinese</option>

                    <option value="Japanese">Japanese</option>

                    <option value="Russian">Russian</option>

                    <option value="Esperanto">Esperanto</option>

                </select>

i dont want to hard code the list i want to be able to attach it to a database or at least have a file from which it grabs these values. how would i do this? even something from the web.config file will do! thanks so much for any suggestions

jasper here is the complete code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Niceforms</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <link href="niceforms/niceforms-default.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="niceforms/niceforms.js" type="text/javascript"></script>
    <script>$(function () {
    $.get('file.txt', function (data) {
        var output = data.split(','),
            tmp = '';
        for (i = 0; i < output.length; i++) {
            tmp += '<option value=' + output[i] + '>' + output[i] + '</option>';
        }
        $('#languages').html(tmp);
    });
});
</script>
</head>



<body><div id="container">

<form action="vars.php" method="post" class="niceform">

    <fieldset>

        <legend>Personal Info</legend>

        <dl>

            <dt><label for="email">Email Address:</label></dt>

            <dd><input type="text" name="email" id="email" size="32" maxlength="128" /></dd>

        </dl>
        </fieldset>

    <fieldset>
        <legend>Personal Info</legend>

        <dl>

            <dt><label for="email">Email Address:</label></dt>

            <dd><input type="text" name="email" id="Text13" size="32" maxlength="128" /></dd>

        </dl>
        <dl>

            <dt><label for="email">Email Address:</label></dt>

            <dd><input type="text" name="email" id="Text12" size="32" maxlength="128" /></dd>

        </dl>

        &l开发者_Python百科t;dl>

            <dt><label for="password">Password:</label></dt>

            <dd><input type="password" name="password" id="password" size="32" maxlength="32" /></dd>

        </dl>


        <dl>

            <dt><label for="gender">Gender:</label></dt>

            <dd>

                <select size="1" name="gender" id="gender">

                    <option value="Guy">Guy</option>

                    <option value="Girl">Girl</option>

                    <option value="Dude">Dude</option>

                    <option value="Chic">Chic</option>
                    <option value="Gentleman">Gentleman</option>

                    <option value="Lady">Lady</option>

                    <option value="Male">Male</option>

                    <option value="Female">Female</option>

                    <option value="Don't Ask">Don't Ask</option>

                </select>

            </dd>

        </dl>

        <dl>

            <dt><label for="dobMonth">Date of Birth:</label></dt>

            <dd>

                <select size="1" name="dobMonth" id="dobMonth">

                    <option value="Jan">Jan</option>

                    <option value="Feb">Feb</option>

                    <option value="Mar">Mar</option>

                    <option value="Apr">Apr</option>

                    <option value="May">May</option>

                    <option value="Jun">Jun</option>

                    <option value="Jul">Jul</option>

                    <option value="Aug">Aug</option>

                    <option value="Sep">Sep</option>

                    <option value="Oct">Oct</option>

                    <option value="Nov">Nov</option>

                    <option value="Dec">Dec</option>

                </select>

                <select size="1" name="dobDay" id="dobDay">

                    <option value="01">01</option>

                    <option value="02">02</option>

                    <option value="03">03</option>

                    <option value="04">04</option>

                    <option value="05">05</option>

                    <option value="06">06</option>

                    <option value="07">07</option>

                    <option value="08">08</option>

                    <option value="09">09</option>

                    <option value="10">10</option>

                    <option value="11">11</option>

                    <option value="12">12</option>

                    <option value="13">13</option>

                    <option value="14">14</option>

                    <option value="15">15</option>

                    <option value="16">16</option>

                    <option value="17">17</option>

                    <option value="18">18</option>

                    <option value="19">19</option>

                    <option value="20">20</option>

                    <option value="21">21</option>

                    <option value="22">22</option>

                    <option value="23">23</option>

                    <option value="24">24</option>

                    <option value="25">25</option>

                    <option value="26">26</option>

                    <option value="27">27</option>

                    <option value="28">28</option>

                    <option value="29">29</option>

                    <option value="30">30</option>

                    <option value="31">31</option>

                </select>

                <select size="1" name="dobYear" id="dobYear">

                    <option value="2000">2000</option>

                    <option value="1999">1999</option>

                    <option value="1998">1998</option>

                    <option value="1997">1997</option>

                    <option value="1996">1996</option>

                    <option value="1995">1995</option>

                    <option value="1994">1994</option>

                    <option value="1993">1993</option>

                    <option value="1992">1992</option>

                    <option value="1991">1991</option>

                    <option value="1990">1990</option>

                    <option value="1989">1989</option>

                    <option value="1988">1988</option>

                    <option value="1987">1987</option>

                    <option value="1986">1986</option>

                    <option value="1985">1985</option>

                    <option value="1984">1984</option>

                    <option value="1983">1983</option>

                    <option value="1982">1982</option>

                    <option value="1981">1981</option>

                    <option value="1980">1980</option>

                    <option value="1979">1979</option>

                    <option value="1978">1978</option>

                    <option value="1977">1977</option>

                    <option value="1976">1976</option>

                    <option value="1975">1975</option>

                    <option value="1974">1974</option>

                    <option value="1973">1973</option>

                    <option value="1972">1972</option>

                    <option value="1971">1971</option>

                    <option value="1970">1970</option>

                    <option value="1969">1969</option>

                    <option value="1968">1968</option>

                    <option value="1967">1967</option>

                    <option value="1966">1966</option>

                    <option value="1965">1965</option>

                    <option value="1964">1964</option>

                    <option value="1963">1963</option>

                    <option value="1962">1962</option>

                    <option value="1961">1961</option>

                    <option value="1960">1960</option>

                    <option value="1959">1959</option>

                    <option value="1958">1958</option>

                    <option value="1957">1957</option>

                    <option value="1956">1956</option>

                    <option value="1955">1955</option>

                    <option value="1954">1954</option>

                    <option value="1953">1953</option>

                    <option value="1952">1952</option>

                    <option value="1951">1951</option>

                    <option value="1950">1950</option>

                </select>

            </dd>

        </dl>

    </fieldset>

    <fieldset>

        <legend>Preferences</legend>

        <dl>

            <dt><label for="color">Favorite Color:</label></dt>

            <dd>

                <input type="radio" name="color" id="colorBlue" value="Blue" /><label for="colorBlue" class="opt">Blue</label>

                <input type="radio" name="color" id="colorRed" value="Red" /><label for="colorRed" class="opt">Red</label>

                <input type="radio" name="color" id="colorGreen" value="Green" /><label for="colorGreen" class="opt">Green</label>

            </dd>

        </dl>

        <dl>

            <dt><label for="interests">Interests:</label></dt>

            <dd>

                <input type="checkbox" name="interests[]" id="interestsNews" value="News" /><label for="interestsNews" class="opt">News</label>

                <input type="checkbox" name="interests[]" id="interestsSports" value="Sports" /><label for="interestsSports" class="opt">Sports</label>

                <input type="checkbox" name="interests[]" id="interestsEntertainment" value="Entertainment" /><label for="interestsEntertainment" class="opt">Entertainment</label>

                <input type="checkbox" name="interests[]" id="interestsCars" value="Cars" /><label for="interestsCars" class="opt">Automotive</label>

                <input type="checkbox" name="interests[]" id="interestsTechnology" value="Technology" /><label for="interestsTechnology" class="opt">Technology</label>

            </dd>

        </dl>

        <dl>

            <dt><label for="languages">Languages:</label></dt>

            <dd>

                <select size="4" name="languages[]" id="languages" multiple="multiple">


                </select>

            </dd>

        </dl>

    </fieldset>

    <fieldset>

        <legend>Comments</legend>

        <dl>

            <dt><label for="comments">Message:</label></dt>

            <dd><textarea name="comments" id="comments" rows="5" cols="60"></textarea></dd>

        </dl>

        <dl>

            <dt><label for="upload">Upload a File:</label></dt>

            <dd><input type="file" name="upload" id="upload" /></dd>

        </dl>

        <dl>

            <dt><label for="test">Sample Button:</label></dt>

            <dd><button type="button" name="test" id="test">I Do Nothing</button></dd>

        </dl>

    </fieldset>

    <fieldset class="action">

        <input type="submit" name="submit" id="submit" value="Submit" />

    </fieldset>

</form>

<p id="footer">Niceforms v.2.0<br />&copy;Lucian Slatineanu - <a href="http://www.emblematiq.com/">Emblematiq</a><br />Last update: Nov 13 2008</p>

</div></body>

</html>

You can use an external datasource pretty easily with jQuery. First you would need to setup a datasource. It could be an .asp page that draws information from a database, a text file, or really any other file you would like to use.

--Datasource Output (Maybe just a text file that looks like this)--

English,French,Spanish,Italian,Chinese,Japanese,Russian,Esperanto

--jQuery code--

$(function () {
    $.get('path_to/file.txt', function (data) {
        var output = data.split(','),
            tmp = '';
        for (i = 0; i < output.length; i++) {
            tmp += '<option value=' + output[i] + '>' + output[i] + '</option>';
        }
        $('#languages').html(tmp);
    });
});

The above code executes after the dom is ready ($(function () {) and uses an AJAX request. After the AJAX request comes back successful the data is split at the commas into an array, then that array is iterated through and a temporary variable (tmp) stores what you want to inject into the dom. After the for(){} loop runs the tmp variable is injected into the id="languages" select input.

Here is a link to the jQuery documentation for the $.get() method: http://api.jquery.com/jQuery.get/

0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9