設定ページの負荷で値を選択

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"属性をオプション要素の1つに設定することができます。

<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を使用して、それは、サーバー側をしたいので、ブロックは、1がデフォルトで選択されるかを決定する場合は、あなたが/他の場合に使用する必要があります。

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) FirefoxとIEがデフォルトでdifferents with the managing of the cacheあるため

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

：私はあなたがこれを使用することを拒否しないことを考慮し、その後

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

：あなたが試すことができます。

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); 
    } 
    }; 
}