使用時不會觸發jQuery Focus功能 <select> PHP中的數組生成的選項

Question

下面的$('select').focus函數適用於html <select>元素，但是當與<select>元素一起使用時，它不會被觸發，其中選項由下面顯示的php函數'printSelectOptions'生成。

$('select').focus功能允許我區分選擇元素的默認值（或“默認狀態”，預設為最常選擇的選項），以及用戶主動選擇的時間單擊表單元素的值（表示他們主動決定將其設置為該值）。 我在這里發布了一個功能實例的小提琴： http ： //jsfiddle.net/chayacooper/JHAPp/6/

我正在嘗試在用戶可以查看和編輯其帳戶信息的頁面上使用此功能，並且此頁面上的<select>元素選項由php'printSelectOptions'函數中的$ options數組生成，以便它可以預先生成 - 選擇與db信息匹配的選項。 結果我添加了代碼，允許我選擇匹配db值的正確選項，無論它是否設置為默認值*（即value =“$ 50_default”vs。value =“$ 50”）* ，除非它被js $('select').focus函數更改，否則它會提交從db中獲取的相同值。 但是，由於$('select').focus功能沒有在帳戶頁面上觸發，如果從db獲取的值為“$ 50_default”，它將為“$ 50_default”和“$ 50”提交相同的值”。

JS功能

<script>
$('select').focus(function () {
    var option = $(this).find("option[value*=default]");
    option.attr('value', option.attr('value').replace(/_default/g, ''));
});
</script>
<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>

PHP和HTML - 帳戶頁面

<?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);
    // This function selects 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>';
        }
    }
?>

<select name="jeans">

<?php
    // Generates a <select> element with the options specified in this array        
        $options = array("Null"=>"", "$0"=>"$0", "$50"=>"$50", "$100"=>"$100", "$150"=>"$150");         
        if ($row_default['jeans'] !== $row['jeans']) {
            $newOptions = array();
            foreach ($options as $key => $value) {
                if ($key === $row_default['jeans']) {
                    $newOptions[$row['jeans']] = $value;
                } else {
                    $newOptions[$key] = $value;
                }
            }
            $options = $newOptions;
        }
        $selected = $row['jeans'];
    // Pre-selects the option matching the db information
    echo printSelectOptions($options, $selected); 
?> 

</select> 

Answer 1

我之前應該注意到這一點，但是對$('select').focus的調用不在文檔就緒處理程序中，而是在<select>添加到DOM之前。 因此，它沒有被綁定到<select> 。

嘗試：

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

Answer 2

在您的評論中，您說您正在嘗試使用Dropkick或jQuery UI MultiSelect Widget。 由於這不是一個多選下拉菜單，我認為Dropkick會是你想要的。

這是一個jsfiddle ，顯示代碼不適用於Dropdkick。

我的理解是普通事件綁定不適用於Dropkick。 相反，你必須使用dropkick回調，如下所示：

$('select').dropkick({
    change: function(value, label) {
        alert('You picked: ' + label + ':' + value);
   }
});

似乎“更改”回調是唯一可用的回調。 似乎沒有支持“焦點”回調。

另一個問題是似乎沒有辦法改變Dropkick選擇的選項。 （我在jsfiddle中嘗試了你的代碼，值變為“0”。）

如果您僅限於使用“更改”回調，那么無法更改選項值的解決辦法是不在任何值上包含“_default”。 相反，您將在表單中包含隱藏字段。 當db的值以“_default”結尾時，隱藏字段設置為“true”; 否則設置為“false”。 dropkick select的“change”回調會將隱藏值設置為“false”。 發布表單時，服務器會檢查隱藏值是否為“true”，並在發布的選擇值的末尾附加“_default”。

更新：

如果要實現隱藏字段，則顯示頁面的代碼如下所示：

<script>
$(function() {
    $('select').dropkick({
        change: function() {
            $('input[name=isDefaultPriceSelected]').val('false');
       }
    });
});
</script>

<?php
    // Helper method that tells if the given string ends with the given substring.
    function endsWith($str, $substr) {
        $substrLength = strlen($substr);
        return substr_compare($str, $substr, -substrLength, substrLength) === 0;
    }

    // Helper method that prints out a hidden input element.
    function printHiddenInput($name, $value) {
        echo '<input type="hidden" name="' . $name . '" value="' . $value . '" />
    }
?> 

<select name="jeans">
<?php
    $options = array("Null"=>"", "$0"=>"$0", "$50"=>"$50", "$100"=>"$100", "$150"=>"$150");
    echo printSelectOptions($options, $row_default['jeans']); 
?> 
</select>

<?php
    echo printHiddenInput('isDefaultPriceSelected', endsWith($row['jeans'], '_default') ? 'true' : 'false'); 
?> 

您仍然需要處理處理表單帖子的代碼。 它必須同時查找選擇值和隱藏值。 如果隱藏值為“true”，則應將“_default”附加到已發布選擇值的末尾。

注意：您將不再使用replaceKey()輔助函數。 :(

Answer 3

你嘗試過使用過嗎？

$(document).on('focus', 'select', function() {
    //code here
});