很多情况下,当我有这样的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
实例,所有这些实例都有不同的值。谢谢你的帮助!
<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>
当然,你可以用一种更优雅的方式在更高的抽象层次上使用数组等,但是你明白了。
<?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>";
?>
之类的?
您可以使用php将selected="selected"
属性设置为您的选项元素之一。
<option value="<?php echo $data['key']; ?>"<?php if($data['key'] == $selectedKey) : ?> selected="selected"<?php endif; ?>><?php echo $data['value']</option>
最好的办法是:
<option value="glossy" selected="selected">
因为你想让它在服务器端使用php,你必须使用if/else if块来确定默认情况下选择哪个
您可以根据您的paper_type
在选项元素上设置属性selected
。
我建议您在HTML属性中使用双引号作为标准(仅为了可读性)。你可以试试:
<?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默认对缓存的管理是不同的
我已经为此创建了自己的实现,因为我认为在每个选项中添加if/三元制是非常丑陋的。
它看起来像这样:
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);
}
};
}