У меня есть массив выбора, и я хочу получить текущий выбранный элемент в виде строки и передать его в effect.Нет проблем при ручном наборе значения effect, такого как effect: 'bounce', но когда bounce выбрано из списка и применено как переменная к effect, оно не работает.
<select>
<option value="bounce">Bounce</option>
</select>
<script>
const select = document.querySelector("#effect"); // This is the select array
let selecetedValue = select[select.selectedIndex].value; // This is the selected option string
$(".tooltip").tooltip({
show: {
effect: selecetedValue, // This is where the string is applied(this is the problem)
delay: 250
}
});
</script>
Вот фрагмент кода, когда он не работает:
const select = document.querySelector("#effect");
let selecetedValue = "'" + select[select.selectedIndex].value + "'";
$(".tooltip").tooltip({
show: {
effect: selecetedValue,
delay: 250
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document</title>
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div style="width:400px; margin:100px auto;">
<select id="effect">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
<option value="myAnimation">My animation</option>
</select>
<br /><br />
<div style="width:100px">Name:</div>
<input
id="ime"
class="tooltip"
name="ime"
style="width:200px"
title="Name"
/>
</div>
</body>
</html>
Вот фрагмент кода того, как он должен работать:
const select = document.querySelector('#effect');
let selecetedValue = select[select.selectedIndex].value;
$('.tooltip').tooltip({
show: {
effect: 'bounce',
delay: 250
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document</title>
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div style="width:400px; margin:100px auto;">
<select id="effect">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
<option value="myAnimation">My animation</option>
</select>
<br /><br />
<div style="width:100px">Name:</div>
<input
id="ime"
class="tooltip"
name="ime"
style="width:200px"
title="Name"
/>
</div>
</body>
</html>