Рабочий пример можно посмотреть тут))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#form1 ul li").on("click",function(){
    if ($(this).find("ul").css('display') != 'block'){
        $(this).find("ul").slideDown("slow");
        $(this).find("ul li").on("click",function(){
            var vl = $(this).attr("attr-val");
            if($(this).parent().hasClass("class1")){
                $("input[name=h_field1]").val(vl);
                $(this).parent().slideUp("slow");
                $(this).parent().parent().find("a").html(vl);
            }else if($(this).parent().hasClass("class2")){
                $("input[name=h_field2]").val(vl);
                $(this).parent().slideUp("slow");
                $(this).parent().parent().find("a").html(vl);
            }
        });
    }else{
        $(this).find("ul").slideUp("slow");
    }
});
$("#form1 ul li").focusout(
    function(){
        $(this).find("ul").slideUp("slow");
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="" name="" method="" id="form1">
<input type="hidden" name="h_field1" value="0">
<input type="hidden" name="h_field2" value="0">
<ul>
    <li><a href="javascript:void(0)" id="MainField1">MainField1</a>
    <ul class="class1">
        <li attr-val="field1_1">field1_1</li>
        <li attr-val="field1_2">field1_2</li>
        <li attr-val="field1_3">field1_3</li>
    </ul>
    </li>
</ul>
<ul>
    <li><a href="javascript:void(0)" id="MainField2">MainField2</a>
    <ul class="class2">
            <li attr-val="field2_1">field2_1</li>
            <li attr-val="field2_2">field2_2</li>
            <li attr-val="field2_3">field2_3</li>
    </ul>
    </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 ul {
  border: 2px solid #000;
  padding: 19px 20px;
  background: transparent;
  margin-right: 20px;
  line-height: 22px;
  width: 184px;
  display: inline-block;
  list-style: none;
}

ul li {
  position: relative;
  font-size: 16px;
}

ul li a {
  color: #000;
  font-size: 16px;
  text-decoration: none;
  display: block;
  position: relative;
}

ul li a:after {
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  margin-top: -2px;
  display: block;
  width: 0;
  height: 0;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

ul li ul {
  display: none;
  position: absolute;
  left: -22px;
  margin: 0;
  top: 48px;
  padding: 10px 20px;
  background: #F5F5F5;
  z-index: 100;
}
  ul li ul li {
    padding: 5px 0;
    cursor: pointer;
    color: #000;
  }
  ul li ul li:hover {
    text-decoration: underline;
  }