設置頁面加載時選擇值

Question

許多情況下，當我有這樣的HTML，我跟着它與jquery設置值。不過，我覺得這不是最好的辦法，並正在尋找替代品。

<select class='papertype' name='papertype'> 
     <option value='glossy'>Glossy</option> 
     <option value='matte'>Matte</option> 
     <option value='luster'>Luster</option> 
     <option value='metallic'>Metallic</option> 
</select> 

$(document).ready(function(){ 
    $('.papertype').val('<?php print $image->paper_type; ?>'); 
} 

我希望做到這一點，而不使用任何類型的JavaScript，完全服務器端。導致問題的一個重要因素是我現在正在編碼的頁面有多個.papertype的實例，所有這些實例都有不同的值。謝謝你的幫助！

Answer 1

<select class='papertype' name='papertype'> 
     <option value='glossy' <?php echo ($image->paper_type == 'glossy' ? ' selected="selected"' : ''); ?>>Glossy</option> 
     <option value='matte' <?php echo ($image->paper_type == 'matte' ? ' selected="selected"' : ''); ?>>Matte</option> 
     <option value='luster' <?php echo ($image->paper_type == 'luster' ? ' selected="selected"' : ''); ?>>Luster</option> 
     <option value='metallic' <?php echo ($image->paper_type == 'metallic' ? ' selected="selected"' : ''); ?>>Metallic</option> 
</select> 

當然，你可以用一個更優雅的方式在數組等更高的抽象層次上做到這一點，但你明白了。

Answer 2

您可以使用php將selected="selected"屬性設置爲您的一個選項元素。

<option value="<?php echo $data['key']; ?>"<?php if($data['key'] == $selectedKey) : ?> selected="selected"<?php endif; ?>><?php echo $data['value']</option> 

Answer 3

最好的辦法是使用：

<option value="glossy" selected="selected"> 

既然你想讓它使用PHP的服務器端，你將不得不使用的if/else if塊，以確定哪些人會被默認選中。

Answer 4

<?php 
$options = Array(
    'glossy' => 'Glossy', 
    'matte' => 'Matte', 
    'luster' => 'Luster', 
    'metallic' => 'Metallic' 
); 
echo "<select class='papertype' name='papertype'>"; 
foreach($options as $k => $v) { 
    echo "<option value='$k'"; 
    if($image->paper_type == $k) echo " selected"; 
    echo ">$v</option>"; 
} 
echo "</select>"; 
?> 

這樣的事情？

Answer 5

根據您的paper_type，您可以在選項元素上設置屬性selected。

Answer 6

我建議您使用HTML屬性的雙引號作爲standard (only for readability)。你可以嘗試使用：

<?php 
    $sPaperType = $image->paper_type; 
?> 

<select class="papertype" name="papertype"> 
     <option value="glossy" <?php if($sPaperType==="glossy") echo 'selected="selected"' ?>) ?> >Glossy</option> 
     <option value="matte" <?php if($sPaperType==="matte") echo 'selected="selected"' ?>) ?>>Matte</option> 
     <option value="luster" <?php if($sPaperType==="luster") echo 'selected="selected"' ?>) ?>>Luster</option> 
     <option value="metallic" <?php if($sPaperType==="metallic") echo 'selected="selected"' ?>) ?>>Metallic</option> 
</select> 

然後，我認爲你不應該拒絕使用這樣的：

$(document).ready(function(){ 
    $(".papertype").val("<?php echo $sPaperType; ?>"); 
} 

因爲Firefox和IE默認是differents with the managing of the cache。

Answer 7

我已經爲此創建了我自己的實現，因爲我認爲在每個選項中添加一個if/ternary是醜陋的。

它看起來有點像這樣：

jQuery的解決方案：

$("select[data-svalue]").each(function(){ 
 
    $(this).val($(this).data('svalue')).trigger('change'); //I trigger change because of select2, but if you don't use any plugins for select, you won't need it here. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select data-svalue="3"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select>

我沒有它環繞$(document).ready()，因爲我把它放在我的文件的末尾，和.ready有一個小的延遲，而沒有它的變化是瞬間的。

的Javascript唯一的解決辦法：

document.querySelectorAll('select[data-svalue]').forEach(function(el){ 
 
    el.value = el.dataset.svalue; 
 
})

<select data-svalue="3"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select>

如果你想支持舊版本的Internet Explorer（< 11），你可以將它添加到你的代碼，或者乾脆使用for代替forEach。

if (!Array.prototype.forEach) { 
    Array.prototype.forEach = function(fn, scope) { 
    for(var i = 0, len = this.length; i < len; ++i) { 
     fn.call(scope, this[i], i, this); 
    } 
    }; 
}