添加的東西到jQuery的列表框

我使用這個演示：添加的東西到jQuery的列表框

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

我想知道如何能夠將數據源添加到這個列表：

<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>

我不想硬編碼列表我希望能夠將其附加到數據庫或至少有一個文件，從中抓取這些值。我將如何做到這一點？甚至從web.config文件中的東西都會做！非常感謝您的任何建議

碧玉這裏是完整的代碼：

<!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> 

     <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>

來源

2011-09-13 l--' ' ' ' ' ' ---------' ' ' ' ' ' ' ' ' ' ' '

您可以使用jQuery很容易地使用外部數據源。首先你需要設置一個數據源。它可以是一個.asp頁面，用於從數據庫，文本文件或任何其他想要使用的文件中提取信息。

--Datasource輸出（也許只是一個文本看起來像這樣的文件） -

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

--jQuery代碼 -

$(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); 
    }); 
});

上面的代碼執行後DOM就緒（$(function() {）並使用AJAX請求。在AJAX請求返回成功後，數據在逗號處被分割成一個數組，然後該數組將被迭代並且一個臨時變量（tmp）存儲要注入到dom中的內容。在for(){}循環運行後，tmp變量被注入到id="languages"選擇輸入中。

這裏是jQuery的文檔的鏈接的$.get()方法：http://api.jquery.com/jQuery.get/

來源

2011-09-13 20:46:13 Jasper

這是令人驚訝的是，我會叫這個，請在上面的代碼？再次感謝你！ –

你能告訴我，我需要做些什麼變化，我需要對上面張貼的代碼 –

您需要將'path_to/file.txt'更改爲您的數據源，然後將jQuery代碼放入頁面的源代碼中， id =「語言」'選擇輸入。代碼將在dom準備好後自動運行。當然，JavaScript（jQuery）代碼必須放在一些''標籤中。 – Jasper

添加的東西到jQuery的列表框

回答

相關問題