2

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

在表格 1中，我为 300 多个 Select 元素预先选择了最常用的选项，并且该函数（JS 和 jQuery 的组合）允许我区分这些值何时仍处于其初始预选/默认状态与何时处于初始状态。当用户通过单击表单元素主动选择该值时（表明他们做出了将其设置为该值的主动决定）。我在这里发布了一个带有此工作示例的小提琴：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>
4

1 回答 1

0

这是答案，感谢@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);

我了解到这不适用于我用于样式<select>元素的两个 jQuery 插件（jQuery UI MultiSelect Widget和Dropkick），因为这两个插件都不支持focus事件或标准click事件。

我修改了 JS 函数以使用MultiSelect Widget的自定义open事件，并在这里发布了一个新函数的小提琴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一起使用要复杂得多，我已经发布了我在这里使用的方法的小提琴：http: //jsfiddle.net/john_s/yhAX5/4/。此解决方法需要创建 2 组<select>元素 - 一组使用标准元素并且是隐藏的( display:none)，另一组使用 Dropkick 并且对用户可见。它也使用该change()方法，因此如果用户单击下拉框然后有意识地决定保留“默认”值，则不会修改该值。

于 2013-03-22T02:08:02.733 回答