javascript - Javascript のネストされたリストからアイテムを事前選択する

Question

2 つの類似したフィールド (言語と成果物) のアイテムを事前に選択しようとしています。

<div class="fields-wrapper">
  <div class="language-field">
    <ul>
        <li value="1">EN</li>
        <li value="2">ES</li>
        <li value="3">NL</li>
    </ul>
  </div>

  <div class="deliverables-field">
    <ul>
        <li value="1">A</li>
        <li value="2">B</li>
        <li value="3">C</li>
    </ul>
  </div>
</div>

私のJavascriptでは、以下の2つの方法でそれぞれの項目を選択しようとしていますが、役に立ちません。

<script type="text/javascript">
$(document).ready(function() {
  $(".language-field ul li").val(["1"]).addClass('selected');
  $(".deliverables-field ul li").eq(0).addClass('selected');
 });

Answer 1

ここで属性セレクターを使用する必要があります。.val()は、入力フィールドの値を取得/設定するために使用されます。

あなたの場合、それは要素liのvalue属性です。

$(function(){
    $('.language-field ul li[value="1"]').addClass('selected');
    $(".deliverables-field ul li").eq(0).addClass('selected');
})

デモ:フィドル