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
$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 3

您可以使用php将selected="selected"属性设置为您的选项元素之一。

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

Answer 4

最好的选择是使用：

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

由于您希望服务器端使用php，因此您必须使用if / else if块来确定默认选择哪一个。

Answer 5

您可以根据selected在选项元素上设置属性paper_type。

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解决方案：

＆＃13;

$("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.
});

＆＃13;

<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>

＆＃13;

我没有把它包裹在$(document).ready()，因为我把它放在我文件的末尾，而.ready有一个小延迟，而没有它，这个改变是即时的。

仅限Javascript解决方案：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您想支持旧版本的Internet Explorer（＆lt; 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);
    }
  };
}

设置选择页面加载值

7 个答案: