php - 修改此 JS Focus 函数以使用动态设置 Select 选项的 PHP 函数

Question

这个 focus 函数允许我在 Javascript 中操作 Select 元素选项的值，我需要创建一个类似的函数来与下面的 PHP 函数一起使用。

在 Form 1 中，我为 300 多个 Select 元素预先选择了最常选择的选项，并且函数(JS 和 jQuery 的组合)允许我区分这些值何时仍在他们的初始预选/默认状态与用户通过单击表单元素主动选择该值时的状态(表明他们主动决定将其设置为该值)。我在这里发布了一个带有工作示例的 fiddle :http://jsfiddle.net/chayacooper/JHAPp/4/

我在用 PHP 创建类似函数以用于客户帐户页面(允许用户编辑他们的信息)时遇到了问题。下面的代码允许我正确地预先选择与数据库中的信息匹配的值，但我不知道如何修改代码以便在用户没有关注元素时提交默认值。与第一种形式不同，我无法手动更改 $options 数组中的实际值，因为它们可能已经为该字段选择了一个值。 (目前我只是删除“_default”以使其正常工作)。

我猜我可能需要类似于原始函数的东西，但使用获取的值而不是 $options 数组值，这样我就可以在元素未获得焦点时发布该值。

表格 1 - HTML 和 JS 函数

<select name="jeans">
    <option value="$0">$0</option>
    <option value="$50_default" selected="selected">$50</option>
    <option value="$100">$100</option>
    <option value="$150">$150</option>
</select>

$('select').focus(function () {
    var option = $(this).find("option[value*=default]");
    option.attr('value', option.attr('value').replace(/_default/g, ''));
});

表格 2 - HTML 和 PHP

<?php
    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);
    // Pre-selects the option matching the db information
    function printSelectOptions($dataArray, $currentSelection) {
        foreach ($dataArray as $key => $value) {
            echo '<option ' . (($key == $currentSelection) ? 'selected="selected"' : '') . ' value="' . $key . '">' . $value . '</option>';
        }
    }
?>
<select name="jeans">
<?php
    // Generates a `Select` element 
    $options = array("Null"=>"", "$0"=>"$0", "$50"=>"$50", "$100"=>"$100", "$150"=>"$150");
    $selected = $row_default['jeans'];
    // Pre-selects the option matching the db information
    echo printSelectOptions($options, $selected); 
?> 
</select>

Answer 1

这是由了不起的@JohnS 提供的答案:-)

// This is a 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;
}

$options = array("Null"=>"", "$0"=>"$0", "$50"=>"$50", "$100"=>"$100", "$150"=>"$150");

// We will change the key for the entry in $options so it includes "_default" if
// the value from the database includes "_default". We need to do this only if
// $row['jeans'] ends with "_default". That will be the case if these two are
// different.
if ($row_default['jeans'] !== $row['jeans']) {
    $options = replaceKey($options, $row_default['jeans'], $row['jeans']);
}

// Now we can use the value from the db for setting the selected value, rather
// than the value that had "_default" removed. 
$selected = $row['jeans'];

// Pre-selects the option matching the db information.
echo printSelectOptions($options, $selected);

我通过艰难的方式了解到这不适用于我用于样式化的两个 jQuery 插件 <select>元素 ( jQuery UI MultiSelect Widget 和 Dropkick ) 因为这两个插件都不支持 focus事件或标准 click事件。

我修改了 JS 函数以使用 MultiSelect Widget的定制open事件，并在这里发布了新功能的 fiddle http://jsfiddle.net/chayacooper/dFyMq/

$(select).multiselect({ 
    open: function (event, ui) {
        var option = $(this).find("option[value*=default]");
        option.attr('value', option.attr('value').replace(/_default/g, ''));
        $(select).multiselect("refresh")
    }
});

与 Dropkick 一起使用复杂得多，我用我在这里使用的方法发布了一个 fiddle :http://jsfiddle.net/john_s/yhAX5/4/ .此解决方法需要创建 2 组 <select>元素 - 一组使用标准元素并且隐藏( display:none )，另一组使用 Dropkick 并且对用户可见。它还使用 change()方法，因此如果用户单击下拉框然后有意识地决定保留“默认”值，则不会修改该值。