从Javascript的嵌套列表中预选择项目

Question

I'm trying to have items in two similar fields (language and deliverables) pre-selected.

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

In my javascript, I'm trying the below two ways to have the respective items selected, but to no vain. I'll be indebted for any assistance. Many thanks.

<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

You need to use the attribute selector here. .val() is used to get/set the value of an input field.

In your case since you are dealing with li the value is an attribute of the element.

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

Demo: Fiddle