根据单选按钮选择将下拉菜单的值和显示名称更改为SQL查询结果

时间:2011-08-26 23:14:29

标签: javascript sql forms menu drop-down-menu

重要提示:我想要的大部分内容都已完成&功能性 - 唯一不起作用的部分是得到一个“值=”,它与下拉列表中选择选项的名称不同。那就是说我要把整个事情都放在任何想要使用类似东西的人都会受益。


目标:当用户点击单选按钮时,页面上其他位置的下拉菜单会被修改为显示不同的值,这些值是从SQL查询中提取的。

特别是在这个例子中,用户会选择一个学术课程(比如博士),下拉列表显示哪些开课日期可用。

这是一个SQL查询,它获取可用的开始日期,并为Javascript格式化它们:

$app_period_lookup_psyd =  mssql_query("select app_period_id,
app_period_display_online from  dbo.v_app001_application_period_for_dropdown 
where pgm_id = 1 order by available_dt");
$app_period_options_psyd = "";
while($result = mssql_fetch_array($app_period_lookup_psyd)) {
$app_period_options_psyd .= "'" . $result['app_period_display_online'] ."', ";
}  

这里创建的变量是 $ app_period_options_psyd ,它会吐出类似的东西: '2011年9月','2012年1月',

这些是单选按钮:

<input type="radio" name="pgm_id" id="macpe" value="4"
onclick="change([<?=$app_period_options_psyd?>]) " />Radio Button 1<br />

<input type="radio" name="pgm_id" id="macpd" value="5"
onclick="change(['January', 'February', 'March']) " />Radio Button 2

单击这两个按钮将生成以下下拉列表:

<select id="app_period_id">
<option value="September 2011">September 2011</option>
<option value="January 2012">January 2012</option>
</select>

<select id="app_period_id">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
</select>

他们通过标题中的这个脚本工作:

<script type="text/javascript">
    function change(arr) {
    var el = document.getElementById('app_period_id');
    el.options.length = 0;
    for(var i = 0; i< arr.length; i++ ) {
    el.options[el.options.length] = new Option( arr[i], arr[i]);
    }
    }
</script>

问题:如何修改Javascript以为value =“”和描述符创建不同的值,其中BOTH值来自查询/查询?这是理想的输出:

<select id="app_period_id">
<option value="app_period_1">January 2012</option>
<option value="app_period_6">February 2012</option>
<option value="app period_18">March 2013</option>
</select>

在SQL查询中生成“app_period_x”。

1 个答案:

答案 0 :(得分:0)

尝试以下更改:

$app_period_options_psyd .= "'" . $result['app_period_display_online'] ."', ";

成为

$app_period_options_psyd .= "'" . $results['app_period_id'] . "'," . $result['app_period_display_online'] ."', ";

这意味着您的阵列现在看起来像

arr_ [0] = Id arr_ [1] =名称关联 等

现在将Javascript功能更改为

<script type="text/javascript">
    function change(arr) {
    var el = document.getElementById('app_period_id');
    el.options.length = 0;
    for(var i = 0; i< arr.length; i+=2 ) {
    el.options[el.options.length] = new Option( arr[i], arr[i+1]);
    }
    }
</script>

现在,您正在循环遍历数组两个步骤,并将这两个元素放入代码中。