如何使用自定义值更改选择中的值

Question

Sup，

我想做一个奇特的选择器，用户可以在其中选择他/她的性别。由于自定义选择不是很好，更准确地根据我的需求设计，我制作了一个符合我需求的自定义选择。

我将我的自定义选择放在默认选择器(稍后将隐藏在应用程序中(下面，并希望根据自定义选择的值更改其值。

我在下面创建了一个片段：

console.clear();
var el = {};
$('.placeholder').on('click', function (ev) {
$('.placeholder').css('opacity', '0');
$('.list__ul').toggle();
});
$('.list__ul a').on('click', function (ev) {
ev.preventDefault();
var index = $(this).parent().index();
var value = $('.list__ul').find('li a').eq(index).html();
$('.placeholder').text( $(this).text() ).css('opacity', '1');
console.log(value);
$('select#gender').val(value);
$('.list__ul').find('li').eq(index).prependTo('.list__ul');
$('.list__ul').toggle();
});

@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
:root {
--bg-main: #f2f2f2;
--color-main: #404040;
--ball-color: rgb(66, 73, 168);
}
body,
html {
font-size: 62.5%;
}
body {
font-family: "Playfair Display", serif;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
color: var(--color-main);
background-color: var(--bg-main);
overflow: hidden;
margin: 0;
height: 100vh;
width: 100vw;
}
h1 {
font-size: clamp(2.4rem, calc(2.4rem + ((1vw - 0.48rem) * 1.9444)), 3.8rem);
min-height: 0vw;
line-height: 1.5;
}
p,
label {
font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 1.6667)), 2rem);
min-height: 0vw;
line-height: 1.5;
font-weight: 700;
}
label {
margin-right: 4rem;
}
#gender {
margin-bottom: 4rem;
}
/** Fancy selector */
.typo,
.list a {
font-size: 60px;
font-weight: 700;
font-family: "Playfair Display", serif;
color: #404040;
text-decoration: none;
}
.typo option,
.list a option {
font-size: 30px;
}
.transition {
transition: all 0.4s ease-in-out;
}
.wrapper {
margin-top: -4.5rem;
margin-bottom: 4rem;
}
.list {
display: inline-block;
position: relative;
margin-left: 6px;
}
.list ul {
text-align: left;
position: absolute;
padding: 0;
top: 0;
left: 0;
display: none;
}
.list ul .active {
display: block;
}
.list li {
list-style: none;
}
.list li:first-child a {
color: rgba(125, 64, 191, 1);
}
.list a {
transition: all 0.4s;
color: rgba(123, 0, 255, 1);
position: relative;
}
.list a:after {
position: absolute;
content: "";
height: 5px;
width: 0;
left: 0;
background: rgba(176, 102, 255, 1);
bottom: 0;
transition: all 0.4s ease-out;
}
.list a:hover {
cursor: pointer;
color: rgba(176, 102, 255, 1);
}
.list a:hover:after {
width: 100%;
}
.placeholder {
border-bottom: 4px solid;
cursor: pointer;
color: rgba(125, 64, 191, 1);
}
.placeholder:hover {
color: #404040;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="gender">Please choose your gender</label>
<select name="gender" id="gender" required="true">
<option value="Choose" selected="" disabled="">Choose gender</option>
<option value="1">Man</option>
<option value="3">Woman</option>
<option value="5">Non-Binary</option>
</select>
<!-- Just a fancy selector -->
<div class="wrapper typo">Please choose a
<div class="list"><span class="placeholder">gender</span>
<ul class="list__ul">
<li><a href="">Man</a></li>
<li><a href="">Woman</a></li>
<li><a href="">Non-Binary</a></li>
</ul>
</div>
</div>

我试着用jQuery使用.val((，**value=**更改默认选择的值，但这似乎对我不起作用。

Answer 1

选项元素的值属性与传递给val函数的值属性不一致。这是固定代码：

console.clear();
var el = {};
$('.placeholder').on('click', function(ev) {
$('.placeholder').css('opacity', '0');
$('.list__ul').toggle();
});
$('.list__ul a').on('click', function(ev) {
ev.preventDefault();
var index = $(this).parent().index();
var value = $('.list__ul').find('li a').eq(index).html();
$('.placeholder').text($(this).text()).css('opacity', '1');
console.log(value);
$('select#gender').val(value);
$('.list__ul').find('li').eq(index).prependTo('.list__ul');
$('.list__ul').toggle();
});

@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
:root {
--bg-main: #f2f2f2;
--color-main: #404040;
--ball-color: rgb(66, 73, 168);
}
body,
html {
font-size: 62.5%;
}
body {
font-family: "Playfair Display", serif;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
color: var(--color-main);
background-color: var(--bg-main);
overflow: hidden;
margin: 0;
height: 100vh;
width: 100vw;
}
h1 {
font-size: clamp(2.4rem, calc(2.4rem + ((1vw - 0.48rem) * 1.9444)), 3.8rem);
min-height: 0vw;
line-height: 1.5;
}
p,
label {
font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 1.6667)), 2rem);
min-height: 0vw;
line-height: 1.5;
font-weight: 700;
}
label {
margin-right: 4rem;
}
#gender {
margin-bottom: 4rem;
}

/** Fancy selector */
.typo,
.list a {
font-size: 60px;
font-weight: 700;
font-family: "Playfair Display", serif;
color: #404040;
text-decoration: none;
}
.typo option,
.list a option {
font-size: 30px;
}
.transition {
transition: all 0.4s ease-in-out;
}
.wrapper {
margin-top: -4.5rem;
margin-bottom: 4rem;
}
.list {
display: inline-block;
position: relative;
margin-left: 6px;
}
.list ul {
text-align: left;
position: absolute;
padding: 0;
top: 0;
left: 0;
display: none;
}
.list ul .active {
display: block;
}
.list li {
list-style: none;
}
.list li:first-child a {
color: rgba(125, 64, 191, 1);
}
.list a {
transition: all 0.4s;
color: rgba(123, 0, 255, 1);
position: relative;
}
.list a:after {
position: absolute;
content: "";
height: 5px;
width: 0;
left: 0;
background: rgba(176, 102, 255, 1);
bottom: 0;
transition: all 0.4s ease-out;
}
.list a:hover {
cursor: pointer;
color: rgba(176, 102, 255, 1);
}
.list a:hover:after {
width: 100%;
}
.placeholder {
border-bottom: 4px solid;
cursor: pointer;
color: rgba(125, 64, 191, 1);
}
.placeholder:hover {
color: #404040;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="gender">Please choose your gender</label>
<select name="gender" id="gender" required="true">
<option value="Choose" selected="" disabled="">Choose gender</option>
<option value="Man">Man</option>
<option value="Woman">Woman</option>
<option value="Non-Binary">Non-Binary</option>
</select>
<!-- Just a fancy selector -->
<div class="wrapper typo">Please choose a
<div class="list"><span class="placeholder">gender</span>
<ul class="list__ul">
<li><a href="">Man</a></li>
<li><a href="">Woman</a></li>
<li><a href="">Non-Binary</a></li>
</ul>
</div>
</div>

Answer 2

它没有正确选择，因为select中没有值为任何自定义选项的选项。相反，请更改它们，使它们与选项的内容相对应。

console.clear();
var el = {};
$('.placeholder').on('click', function (ev) {
$('.placeholder').css('opacity', '0');
$('.list__ul').toggle();
});
$('.list__ul a').on('click', function (ev) {
ev.preventDefault();
var index = $(this).parent().index();
var value = $('.list__ul').find('li a').eq(index).html();
$('.placeholder').text( $(this).text() ).css('opacity', '1');
console.log(value);
$('select#gender').val(value);
$('.list__ul').find('li').eq(index).prependTo('.list__ul');
$('.list__ul').toggle();
});

@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
:root {
--bg-main: #f2f2f2;
--color-main: #404040;
--ball-color: rgb(66, 73, 168);
}
body,
html {
font-size: 62.5%;
}
body {
font-family: "Playfair Display", serif;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
color: var(--color-main);
background-color: var(--bg-main);
overflow: hidden;
margin: 0;
height: 100vh;
width: 100vw;
}
h1 {
font-size: clamp(2.4rem, calc(2.4rem + ((1vw - 0.48rem) * 1.9444)), 3.8rem);
min-height: 0vw;
line-height: 1.5;
}
p,
label {
font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 1.6667)), 2rem);
min-height: 0vw;
line-height: 1.5;
font-weight: 700;
}
label {
margin-right: 4rem;
}
#gender {
margin-bottom: 4rem;
}
/** Fancy selector */
.typo,
.list a {
font-size: 60px;
font-weight: 700;
font-family: "Playfair Display", serif;
color: #404040;
text-decoration: none;
}
.typo option,
.list a option {
font-size: 30px;
}
.transition {
transition: all 0.4s ease-in-out;
}
.wrapper {
margin-top: -4.5rem;
margin-bottom: 4rem;
}
.list {
display: inline-block;
position: relative;
margin-left: 6px;
}
.list ul {
text-align: left;
position: absolute;
padding: 0;
top: 0;
left: 0;
display: none;
}
.list ul .active {
display: block;
}
.list li {
list-style: none;
}
.list li:first-child a {
color: rgba(125, 64, 191, 1);
}
.list a {
transition: all 0.4s;
color: rgba(123, 0, 255, 1);
position: relative;
}
.list a:after {
position: absolute;
content: "";
height: 5px;
width: 0;
left: 0;
background: rgba(176, 102, 255, 1);
bottom: 0;
transition: all 0.4s ease-out;
}
.list a:hover {
cursor: pointer;
color: rgba(176, 102, 255, 1);
}
.list a:hover:after {
width: 100%;
}
.placeholder {
border-bottom: 4px solid;
cursor: pointer;
color: rgba(125, 64, 191, 1);
}
.placeholder:hover {
color: #404040;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="gender">Please choose your gender</label>
<select name="gender" id="gender" required="true">
<option value="Choose" selected="" disabled="">Choose gender</option>
<option value="Man">Man</option>
<option value="Woman">Woman</option>
<option value="Non-Binary">Non-Binary</option>
</select>
<!-- Just a fancy selector -->
<div class="wrapper typo">Please choose a
<div class="list"><span class="placeholder">gender</span>
<ul class="list__ul">
<li><a href="">Man</a></li>
<li><a href="">Woman</a></li>
<li><a href="">Non-Binary</a></li>
</ul>
</div>
</div>