2

このfocus関数を使用すると、Javascriptで要素の選択オプションの値を操作できます。以下のPHP関数で使用する同様の関数を作成する必要があります。

フォーム1では、300以上の選択要素に対して最も一般的に選択されるオプションを事前に選択します。関数（JSとjQueryの組み合わせ）を使用すると、これらの値がまだ初期の事前選択/デフォルト状態にある場合と、ユーザーがフォーム要素をクリックしてその値をアクティブに選択したとき（その値に設定したままにすることをアクティブに決定したことを示します）。私はここにこれの実用的な例でフィドルを投稿しました：http：//jsfiddle.net/chayacooper/JHAPp/4/

PHPで、顧客アカウントページ（ユーザーが自分の情報を編集できるようにする）で使用する同様の関数を作成するのに問題があります。以下のコードでは、データベース内の情報に一致する値を適切に事前選択できますが、ユーザーが要素に焦点を合わせていないときにデフォルト値を送信するようにコードを変更する方法がわかりません。最初の形式とは異なり、$ options配列の実際の値は、そのフィールドの値をすでに選択している可能性があるため、手動で変更することはできません。（現時点では、「_ default」を機能させるために削除しています）。

おそらく元の関数に似たものが必要だと思いますが、$ options配列の値の代わりにフェッチされた値を使用して、要素がフォーカスされていない場合にその値をPOSTできるようにします。

フォーム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>要素に使用する2つのjQueryプラグイン（jQuery UI MultiSelect WidgetとDropkick）ではこれが機能しないという難しい方法を学びました。focusclick

MultiSelectウィジェットのカスタムイベントを使用するようにJS関数を変更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>要素を作成する必要がありました。1セットは標準要素を使用して非表示（display:none）で、もう1セットはDropkickを使用してユーザーに表示されます。また、このchange()メソッドを使用するため、ユーザーがドロップダウンボックスをクリックして、意識的に「デフォルト」値のままにすることを決定した場合でも、値は変更されません。

于 2013-03-22T02:08:02.733 に答える