下面显示的PHP和JS函数一起工作,以 1) 从数组中填充select
元素 2) 预先选择options
匹配的db值,以及 3) 操作select
元素options
on的值focus
。
PHP帮助函数与JS 函数协同工作,focus
如果 db 值包含后缀“_default”,则它会操作字符串值,但只有在选项/字符串值包含美元符号 (“$”) 时才会触发它。代码中没有任何东西需要这样做,但我已经测试了所有可能性,这似乎是唯一导致它的原因。
我已经在http://click2fit.com/sample_php_select.php发布了一个带有组合代码的功能示例。要查看实际问题,请单击“提交”按钮而不关注任一select
元素,它将echo
发布两个select
具有“默认”值的元素的值——一个带有美元符号,一个没有。为了演示问题,我对这些值进行了硬编码,而不是从db中获取它们。另外,我在这里发布了一个带有JS功能的小提琴http://jsfiddle.net/chayacooper/JHAPp/6/
PHP 和 HTML
<?php
// Helper function that replaces a key while maintaining the entry's position in the array. It does not modify the given array, but returns a new array.
function replaceKey($array, $oldKey, $newKey) {
$newArray = array();
foreach ($array as $key => $value) {
$newArray[($key === $oldKey) ? $newKey : $key] = $value;
}
return $newArray;
}
// Function to select the option matching the value in the db
function printSelectOptions($dataArray, $currentSelection) {
foreach ($dataArray as $key => $value) {
echo '<option ' . (($key == $currentSelection) ? 'selected="selected"' : '') . ' value="' . $key . '">' . $value . '</option>';
}
}
try {
$stmt = $conn->prepare("SELECT * FROM price WHERE user_id = :user_id");
$stmt->bindValue(':user_id', $user_id);
$stmt->execute();
} catch(PDOException $e) {echo $e->getMessage();}
$row = $stmt->fetch();
$search_default = array('_default');
$replace_default = array('');
$row_default = str_replace($search_default, $replace_default, $row);
?>
<select name="importance" id="importance">
<?php
// Generates a <select> element with the options specified in this array
$options = array("1"=>"1", "2"=>"2", "3"=>"3", "4"=>"4", "5"=>"5");
// If these are different then the value from the database includes "_default"
if ($row_default['importance'] !== $row['importance']) {
// Change the key for the entry in $options so it includes "_default"
$options = replaceKey($options, $row_default['importance'], $row['importance']);
}
$selected = $row['importance'];
// Pre-selects the option matching the db information
echo printSelectOptions($options, $selected);
?>
</select>
JS函数
$(function () {
$('select').focus(function () {
var option = $(this).find("option[value*=default]");
option.attr('value', option.attr('value').replace(/_default/g, ''));
});
});
JS函数的用途
我正在为 apx 预先选择最常用的选项。300 个select
元素,并使用此功能来区分这些值何时仍处于初始预选/默认状态与用户在关注表单元素后主动选择该值的时间。