Блог

Во многих случаях, когда у меня есть подобный 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.

 <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, чтобы определить, какой из них будет выбран по умолчанию.

Вы можете установить атрибут selected для элемента option в зависимости от вашего paper_type .

Я рекомендую вам использовать двойные кавычки для атрибутов 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 / 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);
    }
  };
}