选择动态生成选项的问题 [英] issues with dynamically generated options for select
问题描述
所以我有一个简单的页面(html)，其中使用jquery将s加载到使用php文件的select中. 代码如下: HTML:
<div data-role="page" id="pg_invoicedtl">
<header data-role="header" data-theme="b">
<a href="javascript:history.go(0)" data-icon="refresh" class="ui-btn-right" data-theme="e">Refresh</a>
<h1>MyApp</h1>
</header>
<div align="center" data-role="content">
<ul data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
<li data-role="list-divider">
<h3 class="ui-li-heading">Select product</h3>
</li>
<li>
<div data-role="fieldcontain">
<label for="prodselect" class="select">Choose the product:</label>
<select name="prodselect" id="prodselect">
</select>
</div>
</li>
</ul>
</div>
</div>
我用来填充选择的脚本(当然位于HEAD部分中)是:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajaxLoader = '<img src="images/ajax-loader.gif" alt="loading.." />';
var loadUrl = "loadproducts.php";
$('#prodselect').toggle('fast', function() {
$(this).html(ajaxLoader);
$(this).toggle('fast', function() {
$.get(loadUrl, function(data){
$('#prodselect').html(data);
},'html');
});
});
$('#prodselect').selectmenu('refresh');
});
</script>
现在脚本正在调用的php文件(loadproducts.php):
<?php
session_start();
include "/tmp/conexiune.php";
$pql = mysql_query("select * from products order by name");
$isfirst = 0;
while ($prow = mysql_fetch_row($pql)){
if ( $isfirst == 0){
echo '<option id="'.$prow['idproducts'].'"value="'.$prow['name'].'" selected="selected">'.$prow['name'].' - '.$prow['pu'].' EUR</option>';
}
else
{
echo '<option id="'.$prow['idproducts'].'"value="'.$prow['name'].'">'.$prow['name'].' - '.$prow['pu'].' EUR</option>';
}
$isfirst++;
}
?>
首先，我必须告诉您上面的代码有效.不过有一个问题...我的问题...:
-
您可能会从代码中看到，我希望select的第一个选项被选中"，但是无论我做什么，都不会发生.刷新页面后，选择框为空，并且如果我想使用鼠标在列表中选择第一个选项，则它什么也不会做，就好像已经选择了第一个项目一样，它也不做.
-
如果我想选择列表中的第二个或其他选项，则一切正常.
-
因此，选择的第一个元素似乎已被选择，但是它没有在选择框中显示其值.
-
我什至还添加了$('#prodselect').selectmenu('refresh');到脚本无结果...
-
此外，如果我使用非异常生成的选项，那么一切都将完美运行.因此，对于静态选项，选择从一开始就显示第一个选项.
我不明白这可能是错的.我在HTML外部测试了php文件(没有从脚本调用它)，结果看起来就像是一个完美的选择内容，当放在选择标记中时，它显示出了完美的结果.但是，当我从脚本中调用它时，会有些混乱.
我会在这里放一个jsfiddle，但我认为它不适用于php文件...
尝试一下:
$('#prodselect').selectmenu('refresh', true);
加载动态内容后，您需要按照文档中的说明强制重新构建选择: http://api.jquerymobile.com/selectmenu/#method-refresh
So I have a simple page (html) where using jquery I load 's into a select using a php file. The code is as follows: The HTML:
<div data-role="page" id="pg_invoicedtl">
<header data-role="header" data-theme="b">
<a href="javascript:history.go(0)" data-icon="refresh" class="ui-btn-right" data-theme="e">Refresh</a>
<h1>MyApp</h1>
</header>
<div align="center" data-role="content">
<ul data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
<li data-role="list-divider">
<h3 class="ui-li-heading">Select product</h3>
</li>
<li>
<div data-role="fieldcontain">
<label for="prodselect" class="select">Choose the product:</label>
<select name="prodselect" id="prodselect">
</select>
</div>
</li>
</ul>
</div>
</div>
The script (located of course in the HEAD section) that I use to populate the select is:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajaxLoader = '<img src="images/ajax-loader.gif" alt="loading.." />';
var loadUrl = "loadproducts.php";
$('#prodselect').toggle('fast', function() {
$(this).html(ajaxLoader);
$(this).toggle('fast', function() {
$.get(loadUrl, function(data){
$('#prodselect').html(data);
},'html');
});
});
$('#prodselect').selectmenu('refresh');
});
</script>
And now the php file (loadproducts.php) that the script is calling:
<?php
session_start();
include "/tmp/conexiune.php";
$pql = mysql_query("select * from products order by name");
$isfirst = 0;
while ($prow = mysql_fetch_row($pql)){
if ( $isfirst == 0){
echo '<option id="'.$prow['idproducts'].'"value="'.$prow['name'].'" selected="selected">'.$prow['name'].' - '.$prow['pu'].' EUR</option>';
}
else
{
echo '<option id="'.$prow['idproducts'].'"value="'.$prow['name'].'">'.$prow['name'].' - '.$prow['pu'].' EUR</option>';
}
$isfirst++;
}
?>
First I must tell you that the above code works. With one problem though... My problem...:
As you may observe from the code, I want the first option of the select to be "selected", but no matter what I do, it does not happen. The select box is empty after refreshing the page, and if I want to select the first option in the list using the mouse, it does nothing, just as if the first item would be selected already so it does not do it.
If I want to select the second or other option in the list, all works fine.
So the first element of the select seems to be selected but it does not display it's value in the select box.
I even added the $('#prodselect').selectmenu('refresh'); to the script with no result...
Also, everything works perfect if I use non-dinamically generated options. So for static Options, the select displays the first Option from the very beginning.
I do not understand what could be wrong. I tested the php file outside the HTML (without calling it from the script) and the result looks just like a perfect select content, and when put inside the select TAGs it displays the perfect result. But when I call it from the script something gets messed up.
I would put a jsfiddle here but I don't think it works with php files...
Try this :
$('#prodselect').selectmenu('refresh', true);
After loading dynamic content you need to force rebuild the select as mentioned in the document : http://api.jquerymobile.com/selectmenu/#method-refresh
这篇关于选择动态生成选项的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
