jQuery 手冊 - 選擇器(Selectors 1.2)

本手冊作者：shian(遨遊飛翔)  |  jQuery官網

• #id

  說明 語法 範例 原始碼
  以元素id做為選擇的條件
  $('#id')
  iframe_sampl

  <div id="div_a">id=div_a</div>
  <div id="div_b">id=div_b</div>
  <div id="div_c">id=div_c</div>
  

• element

  說明 語法 範例 原始碼
  以元素做為選擇的條件
  $('element')
  iframe_sampl

  <div id="div_a">id=div_a</div>
  <div id="div_b">id=div_b</div>
  <div id="div_c">id=div_c</div>
  

• .class

  說明 語法 範例 原始碼
  以類別(class)做為選擇的條件
  $('.class')
  iframe_sampl

  <div id="div_a">id=div_a</div>
  <div id="div_b" class="SampleClass">id=div_b</div>
  <div id="div_c">id=div_c</div>
  

• *

  說明 語法 範例 原始碼
  以 * 做為選擇的條件，*會選擇頁面上所有的元素
  $('*')
  iframe_sampl

  <div id="div_a">id=div_a</div>
  <div id="div_b" class="SampleClass">id=div_b</div>
  <div id="div_c">id=div_c</div>
  

• selector1, selector2, selector…

  說明 語法 範例 原始碼
  多重條件選擇，會以，做為多重條件選擇分隔
  $(select1,select2,…..)
  iframe_sampl

  <div id="div_a">id=div_a</div>
  <div id="div_b" class="SampleClass">id=div_b</div>
  <div id="div_c">id=div_c</div>
  

• 空格

  說明 語法 範例 原始碼
  選擇符合指定 "祖元素裡面的子元素" 所有元素
  $("ul li")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
  </ul>
  

• >

  說明 語法 範例 原始碼
  選擇符合指定 "父元素裡面的子元素" 的所有元素
  $("#id > *")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
  </ul>
  

• +

  說明 語法 範例 原始碼
  符合 自定義同輩上下元素 的選擇條件
  $('element + element')
  iframe_sampl

  <div id="div_a">div_a</div>
  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li>li_a</li>
      <li>li_b</li>
      <li>li_c</li>
  </ul>
  
  

• ~

  說明 語法 範例 原始碼
  選擇 指定元素下的所有指定同輩元素
  $("element ~ element")
  iframe_sampl

  <div id="div_a">div_a</div>
  <span id="span_a">span_a</span><br/>
  <span id="span_b">span_b</span><br/>
  <span id="span_c">span_c</span><br/>
  <div id="div_b">div_b</div>
  

• :first

  說明 語法 範例 原始碼
  指定一元素組裡的第一個元素
  $("element:first")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :last

  說明 語法 範例 原始碼
  指定一元素組裡的最後一個元素
  $("element:last")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :not()

  說明 語法 範例 原始碼
  不以指定該元素做為選擇條件
  $("element:not(selector)")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :even

  說明 語法 範例 原始碼
  指定元素組的奇數元素
  $("element:event")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :odd

  說明 語法 範例 原始碼
  指定一元素組的偶數元素
  $("element:odd")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :eq()

  說明 語法 範例 原始碼
  指定元素組下第幾個元素，元素從0開始計算
  $("element:eq(number)")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :gt()

  說明 語法 範例 原始碼
  指定元素組下第幾個之後的所有元素，元素從0開始計算
  $("element:gt(number)")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :lt()

  說明 語法 範例 原始碼
  指定元素組下第幾個之前的所有元素
  $("element:lt(number)")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b">span_b</span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f">span_f</span></li>
  </ul>
  

• :header

  說明 語法 範例 原始碼
  選擇以<h></h>裡的所有元素
  $(":header")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b"><h3>span_b</h3></span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f"><h3>span_f</h3></span></li>
  </ul>
  

• :animated

  說明 語法 範例 原始碼
  選擇正在進行效果的元素
  $(":animated")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b"><h3>span_b</h3></span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f"><h3>span_f</h3></span></li>
  </ul>
  

• :contains

  說明 語法 範例 原始碼
  以一元素內指定的文字為選擇條件
  $("element:contains()")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b"><h3>span_b</h3></span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f"><h3>span_f</h3></span></li>
  </ul>
  

• :empty

  說明 語法 範例 原始碼
  指定元素裡為空值做為選擇條件
  $("element:empty")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b"></span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f"></span></li>
  </ul>
  

• :has()

  說明 語法 範例 原始碼
  選擇父元素裡有包著子元素
  $("element:has(element)")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b"></span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f"></span></li>
  </ul>
  

• :parent

  說明 語法 範例 原始碼
  選擇所有指定元素裡有文字內容或是有元素
  $("element:parent")
  iframe_sampl

  <ul>
      <li><span id="span_a">span_a</span></li>
      <li><span id="span_b"></span></li>
      <li><span id="span_c">span_c</span></li>
      <li><span id="span_d">span_d</span></li>
      <li><span id="span_e">span_e</span></li>
      <li><span id="span_f"></span></li>
  </ul>
  

• :hidden

  說明 語法 範例 原始碼
  選擇所有隱藏的元素
  $("element:hidden")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a">span_a</span></li>
      <li class="style1" style="display:none"><span id="span_b">span_b</span></li>
      <li class="style1" style="display:none"><span id="span_c">span_c</span></li>
      <li class="style1" style="display:none"><span id="span_d">span_d</span></li>
      <li class="style1"><span id="span_e">span_e</span></li>
      <li class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• :visible

  說明 語法 範例 原始碼
  選擇所有顯示的元素
  $("element:visible")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a">span_a</span></li>
      <li class="style1"><span id="span_b">span_b</span></li>
      <li class="style1"><span id="span_c">span_c</span></li>
      <li class="style1"><span id="span_d">span_d</span></li>
      <li class="style1"><span id="span_e">span_e</span></li>
      <li class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• [attribute]

  說明 語法 範例 原始碼
  選擇有指定屬性的所有元素
  $("element[name]")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a" name="name_span">span_a</span></li>
      <li class="style1"><span id="span_b">span_b</span></li>
      <li class="style1"><span id="span_c" name="name_span">span_c</span></li>
      <li class="style1"><span id="span_d">span_d</span></li>
      <li class="style1"><span id="span_e">span_e</span></li>
      <li class="style1"><span id="span_f" name="name_span">span_f</span></li>
  </ul>
  

• [attribute=value]

  說明 語法 範例 原始碼
  選擇所有元素的屬性為指定值
  $("element[attribute=value]")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a" name="name_span">span_a</span></li>
      <li class="style1"><span id="span_b">span_b</span></li>
      <li class="style1"><span id="span_c" name="name_span">span_c</span></li>
      <li class="style1"><span id="span_d">span_d</span></li>
      <li class="style1"><span id="span_e">span_e</span></li>
      <li class="style1"><span id="span_f" name="name_span">span_f</span></li>
  </ul>
  

• [attribute!=value]

  說明 語法 範例 原始碼
  選擇所有元素的屬性不為指定值
  $("element[attribute!=value]")
  iframe_sampl

  <ul>
      <li name="name_a" class="style1"><span id="span_a">span_a</span></li>
      <li name="name_a" class="style1"><span id="span_b">span_b</span></li>
      <li name="name_a" class="style1"><span id="span_c">span_c</span></li>
      <li name="name_b" class="style1"><span id="span_d">span_d</span></li>
      <li name="name_b" class="style1"><span id="span_e">span_e</span></li>
      <li name="name_b" class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• [attribute^=value]

  說明 語法 範例 原始碼
  選擇所有元素的屬性值開頭為指定值
  $("element[name^='test']")
  iframe_sampl

  <ul>
      <li name="name_a" class="style1"><span id="span_a">span_a</span></li>
      <li name="name_a" class="style1"><span id="span_b">span_b</span></li>
      <li name="name_a" class="style1"><span id="span_c">span_c</span></li>
      <li name="name_b" class="style1"><span id="span_d">span_d</span></li>
      <li name="name_b" class="style1"><span id="span_e">span_e</span></li>
      <li name="name_b" class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• [attribute$=value]

  說明 語法 範例 原始碼
  選擇所有元素的屬性值結尾為指定值
  $("element[name$='test']")
  iframe_sampl

  <ul>
      <li name="name_a" class="style1"><span id="span_a">span_a</span></li>
      <li name="name_a" class="style1"><span id="span_b">span_b</span></li>
      <li name="name_a" class="style1"><span id="span_c">span_c</span></li>
      <li name="name_b" class="style1"><span id="span_d">span_d</span></li>
      <li name="name_b" class="style1"><span id="span_e">span_e</span></li>
      <li name="name_b" class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• [attribute*=value]

  說明 語法 範例 原始碼
  選擇所有元素的屬性的值有包含指定值
  $("element[name*='test']")
  iframe_sampl

  <ul>
      <li name="name_a" class="style1"><span id="span_a">span_a</span></li>
      <li name="name_a" class="style1"><span id="span_b">span_b</span></li>
      <li name="name_a" class="style1"><span id="span_c">span_c</span></li>
      <li name="name_b" class="style1"><span id="span_d">span_d</span></li>
      <li name="name_b" class="style1"><span id="span_e">span_e</span></li>
      <li name="name_b" class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• [attributeFilter1][attributeFilter2][attributeFilterN]

  說明 語法 範例 原始碼
  選擇所有指定一元素的多條件屬性值
  $("element[attributeFilter1][attributeFilter2][attributeFilterN]")
  iframe_sampl

  <ul>
      <li id="li_a" name="name_a" class="style1"><span id="span_a">span_a</span></li>
      <li id="li_b" name="name_a" class="style1"><span id="span_b">span_b</span></li>
      <li id="li_c" name="name_a" class="style1"><span id="span_c">span_c</span></li>
      <li name="name_b" class="style1"><span id="span_d">span_d</span></li>
      <li name="name_b" class="style1"><span id="span_e">span_e</span></li>
      <li name="name_b" class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• :nth-child

  說明 語法 範例 原始碼
  選擇一元素組裡第幾個的指定子元素
  
  index: 指定第幾個
  odd: 指定奇數個
  even: 指定偶數個
  :eq(index): 指定第幾個 (從0開始計算)
  $(" parent-element child-element:nth-child()")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a">span_a</span></li>
      <li class="style1"><span id="span_b">span_b</span></li>
      <li class="style1"><span id="span_c">span_c</span></li>
      <li class="style1"><span id="span_d">span_d</span></li>
      <li class="style1"><span id="span_e">span_e</span></li>
      <li class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• :first-child

  說明 語法 範例 原始碼
  選擇指定父元素裡指定子元素的第一個
  $("parent-element child-element:first-child")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a">span_a</span></li>
      <li class="style1"><span id="span_b">span_b</span></li>
      <li class="style1"><span id="span_c">span_c</span></li>
      <li class="style1"><span id="span_d">span_d</span></li>
      <li class="style1"><span id="span_e">span_e</span></li>
      <li class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• :last-child

  說明 語法 範例 原始碼
  選擇指定父元素裡指定子元素的最後一個
  $("parent-element child-element:first-child")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a">span_a</span></li>
      <li class="style1"><span id="span_b">span_b</span></li>
      <li class="style1"><span id="span_c">span_c</span></li>
      <li class="style1"><span id="span_d">span_d</span></li>
      <li class="style1"><span id="span_e">span_e</span></li>
      <li class="style1"><span id="span_f">span_f</span></li>
  </ul>
  

• :only-child

  說明 語法 範例 原始碼
  選擇指定父元素裡只有一個指定子元素
  $("parent-element child-element:only-child")
  iframe_sampl

  <ul>
      <li class="style1"><span id="span_a">span_a</span></li>
  </ul>
  

• :input

  說明 語法 範例 原始碼
  選擇所有input元素
  $(":input")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :text

  說明 語法 範例 原始碼
  選擇所有 input type=text 元素
  $(":text")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :password

  說明 語法 範例 原始碼
  選擇所有 input type=password 元素
  $(":password")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="password" name="textfield" value="sample for :password"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :radio

  說明 語法 範例 原始碼
  選擇所有 input type= radio 元素
  $(":radio")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="password" name="textfield" value="sample for :password"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :checkbox

  說明 語法 範例 原始碼
  選擇所有 input type= checkbox 元素
  $(":checkbox")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="password" name="textfield" value="sample for :password"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :submit

  說明 語法 範例 原始碼
  選擇所有 input type= submit 元素
  $(":submit")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="password" name="textfield" value="sample for :password"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :image

  說明 語法 範例 原始碼
  選擇所有 input type= image 元素
  $(":image")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="image"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :reset

  說明 語法 範例 原始碼
  選擇所有 input type= reset 元素
  $(":reset")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="reset"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :button

  說明 語法 範例 原始碼
  選擇所有 input type= button 元素
  $(":button")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="button" value="button"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :file

  說明 語法 範例 原始碼
  選選擇所有 input type= file 元素
  $(":file")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="textfield" />
    <input type="file"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :hidden

  說明 語法 範例 原始碼
  選選擇所有 隱藏元素
  $(":hidden")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="hidden"/>
    <input type="hidden"/>
    <textarea name="textarea"></textarea>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  <span id="result"></span>
  

• :enabled

  說明 語法 範例 原始碼
  選擇所有指定元素為enabled
  $("element:enabled")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="text_a" disabled="disabled"/>
    <input type="text" name="text_b" />
    <input type="text" name="text_c" disabled="disabled"/>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  

• :disabled

  說明 語法 範例 原始碼
  選擇所有指定元素為disabled
  $("element:disabled")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="text_a" disabled="disabled"/>
    <input type="text" name="text_b" />
    <input type="text" name="text_c" disabled="disabled"/>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  

• :checked

  說明 語法 範例 原始碼
  選擇所有指定元素為checked
  $("element:checked")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
    <input type="text" name="text_a" disabled="disabled"/>
    <input type="text" name="text_b" />
    <input type="text" name="text_c" disabled="disabled"/>
    <input type="checkbox" name="checkbox" value="checkbox" checked="checked"/>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <input type="checkbox" name="checkbox" value="checkbox" checked="checked"/>
    <input name="radiobutton" type="radio" value="radiobutton" />
    <input type="submit" name="Submit" value="送出" />
  </form>
  

• :selected

  說明 語法 範例 原始碼
  選擇select元素的option為 selected="selected"
  $("select option:selected")
  iframe_sampl

  <form id="form1" name="form1" method="post" action="">
  <select>
      <option value="shian">shian</option>
      <option value="michelle">michelle</option>
      <option value="jack">jack</option>
      <option value="sam">sam</option>
      <option value="tom">tom</option>
  </select>
  <div id="result"></div>
  </form>