j0hnik,
Огромное вам спасибо! |
Выбор ссылки + css эффект
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.go {
display: none;
}
.go.show{
display: block;
overflow: hidden;
width: 24em;
font-size: 180%;
white-space: nowrap;
}
.go.show{
animation: typewriter 4s steps(64) 1s 1 normal both;
}
@keyframes typewriter{
from{width: 0;}
to{width: 100%;}
}
.go a{
text-decoration:none; display: inline-block;
}
.go a:after{
display: block;content: "";height: 2px;width: 0%;background-color: #000000;
}
.go.show a:after{animation: typewriter .8s 3s cubic-bezier(.36,.89,.53,-0.61) both; }
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('.opt'),
div = document.querySelector('.go'),
a = div.querySelector('a'),
inp = document.querySelector('#proso2');
arr = [
{href : "", text : "по умолчанию", title : ""},
{href : "http://test1.ru/", text : "просмотр №1", title : "тут ссылка от выбранного value 1", price : "1"},
{href : "http://test2.ru/", text : "просмотр №2", title : "тут ссылка от выбранного value 2", price : "2"},
{href : "http://test3.ru/", text : "просмотр №3", title : "тут ссылка от выбранного value 3", price : "3"}
];
arr.forEach(function(el,i) {
select.options[i] = new Option(el.text,i)
})
select.addEventListener('change', function() {
div.classList.remove("show");
document.body.clientHeight;
inp.value = "";
if(this.value != "0"){
var d = arr[this.value];
a.href = d.href;
a.text = d.title;
inp.value = d.price;
div.classList.add("show");
}
});
});
</script>
</head>
<body>
<select class="opt"></select>
<div class="go"><a></a></div><br>
<input type="text" id="proso2"/>
</body>
</html>
|
Доброго времени суток! подскажите пожалуйста! как вывести значение price в input?
<select id="proso">
<option value="0" title="">по умолчанию</option>
<option value="http://test1.ru/" title="" price="1">просмотр №1</option>
<option value="http://test2.ru/" title="" price="2">просмотр №2</option>
<option value="http://test3.ru/" title="" price="2">просмотр №3</option>
</select>
<div id="proso1"><a></a></div>
<input type="text" id="proso2"/>
<script>
document.querySelector('#proso').onchange = function() {
var a = document.querySelector('#proso1 a');
a.href=this.value;
a.textContent=this.value!='0'?'тут ссылка от выбранного value':'';
var input = document.querySelector('#proso2');
};
</script>
|
Цитата:
|
<select id="proso">
<option value="0" title="">по умолчанию</option>
<option value="http://test1.ru/" title="" price="1">просмотр №1</option>
<option value="http://test2.ru/" title="" price="2">просмотр №2</option>
<option value="http://test3.ru/" title="" price="2">просмотр №3</option>
</select>
<div id="proso1"><a></a></div>
<input type="text" id="proso2"/>
<script>
document.querySelector('#proso').onchange = function() {
var a = document.querySelector('#proso1 a');
a.href=this.value;
a.textContent=this.value!='0'?'тут ссылка от выбранного value':'';
document.querySelector('#proso2').value = this.options[this.selectedIndex].getAttribute('price');
};
</script>
Вот! но лучше сделайте "data-price", чтобы код был валидный. |
спасибо
|
Доброго времени суток! подскажите как передать значение из select методом get без кнопки sunbut?
document.querySelector('#proso_engine').onchange = function() {
var a = document.querySelector('#proso_engine_01 a');
a.href=this.value;
a.textContent=this.value!='0'?'<?=GetMessage("AK_03");?>':'';
document.querySelector('#proso_engine_02').value = this.options[this.selectedIndex].getAttribute('price-engine');
};
<form method="get" action="" name="form_engine">
<select width="100%" id="proso_engine" name="engine_php">
<option value="0" title="" price-engine="0"><?=GetMessage("AK_04");?></option>
<?$i=0;foreach($arResult['ENGINES'] as $engine):?>
<option value="<?=$engine['DETAIL_PAGE_URL']?>" title="" price-engine="<?=intval($engine['PRICE']['VALUE'])?>" product="<?=$engine['NAME']?>"><?=substr($engine['NAME'], 0, 48)?> - <?=intval($engine['PRICE']['VALUE'])?> <?=GetMessage("AK_07");?></option>
<?endforeach;?>
</select>
</form>
<?php
echo $_GET['engine_php'];
?>
побывала подставить в select - <select onChange="document.getElementsByName("form")[0].submit()"> но ничего не выходит. |
Александр83,
У вас нет формы с именем form, есть с именем name="form_engine" |
Dilettante_Pro,
да всё верно, извините, так и пробовала onChange="document.getElementsByName("form_engine" )[0].submit()" |
Если php вот так.
document.querySelector('#proso_engine').onchange = function() {
var a = document.querySelector('#proso_engine_01 a');
a.href=this.value;
a.textContent=this.value!='0'?'ссылка на объект':'';
document.querySelector('#proso_engine_02').value = this.options[this.selectedIndex].getAttribute('price-engine');
};
<form method="get" action="" name="form_engine"> <select width="100%" id="proso_engine" name="engine_php"> <option value="0" title="" price-engine="0">нет выбранного</option> <option value="https://ссылка.рф" title="" price-engine="100" product="Имя продукта">Имя продукта - 100 руб.</option> // и таких полей много.... </select> </form> и нужно записать в переменную значение цены то есть price-engine="100" в <?php echo $_GET['engine_php'];?> без кнопки и перезагрузки, как это сделать подскажите пожалуйста (желательно без ajax). |
| Часовой пояс GMT +3, время: 07:47. |