Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод значений в зависимости от Select (https://javascript.ru/forum/misc/70575-vyvod-znachenijj-v-zavisimosti-ot-select.html)

ElAxander 16.09.2017 17:49
Вывод значений в зависимости от Select
 
Здравствуйте. Подскажите как можно реализовать данную вещь:
Имеются две формы select
<div id="1">
     <select>
          <option value="1">Красный</option>
          <option value="2"> Синий</option>
          <option value="3">Жёлтый</option>
          <option value="4">Белый</option>
     </select>
    
</div>
<div id="2">
     <select>
          <option value="5">Зелёный</option>
          <option value="6">Чёрный</option>
          <option value="7">Голубой</option>
          <option value="8">Оранжевый</option>
</select>


И соответственно есть набор переменных - цветов, получившихся в результате смешивания.

При выборе двух значений в select выводится через output результат. Спасибо!

рони 16.09.2017 18:02
ElAxander,
в чём проблема и какой результат и куда нужен?

ElAxander 16.09.2017 18:43
Как обработать два значения select'ов и в зависимости от их комбинации вывести значение одной из переменных, определённых зараннее

void() 16.09.2017 18:54
Идея в том, что сначала нужно создать массив с объектами.
Потом узнать значения от select'ов и получить нужный цвет по индексам. Пример как в алерте.
То есть первый индекс у алерта, это значение первого select, а второй индекс - это значение второго select.
В результате возвращается нужный color.

var obj = [
{'5':'color1', '6':'color2', '7':'color3', '8':'color4'},
{'5':'color5', '6':'color6', '7':'color7', '8':'color8'},
{'5':'color9', '6':'color10', '7':'color11', '8':'color12'},
{'5':'color13', '6':'color14', '7':'color15', '8':'color16'}
];

alert(obj[1]['5']);

рони 16.09.2017 19:39
:write: может обьект с обьектами, чтобы не зависеть от индекса ?...

void() 16.09.2017 20:10
Ну... вообще-то да, лучше если объект с объектами :)

Александр83 28.09.2017 06:12
Здравствуйте, подскажите пожалуйста как вывести href (значения - value) в отдельный div блок?

<select id="proso">
<option value="" title="">по умолчанию</option> 
<option value="http://test1.ru/" title="">просмотр №1</option>
<option value="http://test2.ru/" title="">просмотр №2</option>
<option value="http://test3.ru/" title="">просмотр №3</option>
</select>

<div id="proso"><a>тут ссылка от выбранного value</a></div>

Dilettante_Pro 28.09.2017 10:35
Александр83,
Прежде всего, id должен быть уникальным
<select id="proso">
<option value="" title="">по умолчанию</option> 
<option value="http://test1.ru/" title="">просмотр №1</option>
<option value="http://test2.ru/" title="">просмотр №2</option>
<option value="http://test3.ru/" title="">просмотр №3</option>
</select>

<div id="proso1"><a>тут ссылка от выбранного value</a></div>
<script>
    document.querySelector('#proso').onchange = function() {
        document.querySelector('#proso1 a').setAttribute('href',this.value);
   }
</script>

Александр83 28.09.2017 11:54
Спасибо! очень помогли,
Dilettante_Pro,
подскажите еще пожалуйста, при значении value "0"
<option value="0" title="">по умолчанию</option>

убрать надпись тут ссылка от выбранного value
<div id="proso1"><a>тут ссылка от выбранного value</a></div>

заранее очень благодарен!

j0hnik 28.09.2017 12:29 
<select id="proso">
<option value="0" title="">по умолчанию</option> 
<option value="http://test1.ru/" title="">просмотр №1</option>
<option value="http://test2.ru/" title="">просмотр №2</option>
<option value="http://test3.ru/" title="">просмотр №3</option>
</select>

<div id="proso1"><a></a></div>
<script>
    document.querySelector('#proso').onchange = function() {
        var a = document.querySelector('#proso1 a');
        a.href=this.value;
        a.textContent=this.value!='0'?'тут ссылка от выбранного value':'';
   };
</script>

Александр83 28.09.2017 12:45
j0hnik,
Огромное вам спасибо!

рони 28.09.2017 14:06
Выбор ссылки + 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>

Александр83 29.09.2017 17:45
Доброго времени суток! подскажите пожалуйста! как вывести значение 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>

рони 29.09.2017 18:13
Цитата:
Сообщение от Александр83
как вывести значение price в input?
смотрите пост №12 снова

j0hnik 29.09.2017 18:28 
<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", чтобы код был валидный.

Александр83 29.09.2017 18:40
спасибо

Александр83 09.10.2017 13:35
Доброго времени суток! подскажите как передать значение из 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)?>&nbsp;-&nbsp;<?=intval($engine['PRICE']['VALUE'])?>&nbsp;<?=GetMessage("AK_07");?></option> 
<?endforeach;?> 
</select>
</form>
<?php
    echo $_GET['engine_php'];
?>


побывала подставить в select - <select onChange="document.getElementsByName("form")[0].submit()"> но ничего не выходит.

Dilettante_Pro 09.10.2017 17:48
Александр83,
У вас нет формы с именем form, есть с именем name="form_engine"

Александр83 09.10.2017 18:09
Dilettante_Pro,
да всё верно, извините, так и пробовала

onChange="document.getElementsByName("form_engine" )[0].submit()"

Александр83 09.10.2017 18:20
Если 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="Имя продукта">Имя продукта&nbsp;-&nbsp; 100 &nbsp;руб.</option>
// и таких полей много....
</select>
</form>


и нужно записать в переменную значение цены то есть price-engine="100" в <?php echo $_GET['engine_php'];?> без кнопки и перезагрузки, как это сделать подскажите пожалуйста (желательно без ajax).

Александр83 09.10.2017 18:26
есть еще 
<div id="proso_engine_01"><a target="_blank"></a></div>// вывод ссылки
<input type="text" id="proso_engine_02"/> // вывод цены

Александр83 10.10.2017 11:03
неужели не кто не поможет?, или задача настолько не посильна(

Dilettante_Pro 10.10.2017 11:48
Александр83,
Не столько непосильна, сколько непонятна

Nexus 10.10.2017 11:58
Цитата:
Сообщение от Александр83
нужно записать в переменную значение цены то есть price-engine="100" в <?php echo $_GET['engine_php'];?> без кнопки и перезагрузки, как это сделать подскажите пожалуйста (желательно без ajax).
Если атрибут "price-engine" заполняется сервером и не меняется в процессе жизни страницы, то можно воспроизвести код для генерации этой страницы и получить оттуда нужное значение.
Ни перезагрузки, ни ajax'а в этом случае не будет.
Также это значение можно записать, например, в сессию и извлечь, когда появится необходимость.

Александр83 10.10.2017 12:04 
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="Имя продукта">Имя продукта&nbsp;-&nbsp; 100 &nbsp;руб.</option>
// и таких полей много....
</select>
</form>


нужно в скрипт сохранить метод GET формы по свойству price-engine и вывести его в переменную $ak_form_engine // переменная php

Дописать в существующем JS вроде по примеру document.getElementsByName("form_engine")[0].submit()"

Александр83 10.10.2017 12:07
Nexus,
нет сервером он не заполняется / / этот атрибут пустой

Nexus 10.10.2017 12:14
Цитата:
Сообщение от Александр83
нужно в скрипт сохранить метод GET формы по свойству price-engine
Переведите, пожалуйста :)

Без ajax'а или перезагрузки страницы данные на сервер не передать.
$.get('Адрес php-скрипта',{'price-engine':'100'});

Александр83 10.10.2017 12:29
я не сильна в JS поэтому, могу не так понимать термины и основы, но на мой взгляд понятно что надо взять с формы свойство price-engine от выбранного элемента и отправить его на сервер если это будет ajax, то как прописать его полностью, и каким образом он передает без кнопки submit?

Nexus 10.10.2017 12:46
Александр83, я сумел вас понять, сразу нужно было так написать.
price-engine - не свойство, а атрибут элемента.
Строка, которую я написал ранее - это "полная команда", которая немедленно отправит на сервер запрос методом GET. Требует наличия библиотеки jQuery.

Без jQuery:
var xhr=new XMLHttpRequest(),
	URL='Адрес php-скрипта',
	data={
		'price-engine':'100'
	};
	
var http_params=[];
for(var key in data){
	if(data.hasOwnProperty(key))
		http_params.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
};
URL+='?'+http_params.join("&");
  
xhr.open('GET',URL,true);
xhr.send();

https://learn.javascript.ru/ajax-xmlhttprequest

Александр83 10.10.2017 12:57
спасибо, попробую

Александр83 10.10.2017 16:59
Nexus,
скажите пожалуйста.
URL='Адрес php-скрипта', у меня ajax.php
в самом файле что написать?

<?php
$ak_price_engine = $_GET['price-engine'];
?>

Nexus 10.10.2017 17:05
Александр83, вы ответили на свой вопрос.

Александр83 11.10.2017 10:05
Nexus,
по вот этому подскажите где ошибка?
<form method="POST" action="" id="form_engine" name="form_engine">
<select class="proso_engine" width="100%" id="proso_engine" name="engine_php" onclick="komm();">
<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)?>&nbsp;-&nbsp;<?=intval($engine['PRICE']['VALUE'])?>&nbsp;<?=GetMessage("AK_07");?></option> 
<?endforeach;?> 
</select>


$("select.proso_engine").change(function() {
    function komm(){
        $.ajax({
            type: "POST",
            url: '/ajax.handler.php',
            data: {price-engine: '<?=intval($engine['PRICE']['VALUE'])?>'},
        });
    };
});


задача все таже, отправить атрибут price-engine в файл ajax.handler.php

Александр83 23.10.2017 18:17
Здравствуйте! подскажите как сделать так чтоб при выборе "ссылка со стилем" class="ak_12_20" присваивался тегу <a>, соответственно при выборе "нет ссылки" class="ak_12_20" этот исчезал?
<select class="proso2" width="100%" id="proso_table" name="tablephp"> 
<option value="0" title="" price-table="0">нет ссылки</option> 
<option value="100" value-class="ak_12_20" value-url="ссылка" title="" price-table="100" product_table_id="1">ссылка со стилем</option> 
</select>

<div class="ak_11" id="proso_table_01"><a target="_blank"></a></div>

<script type="text/javascript">
        document.querySelector('#proso_table').onchange = function() {
        var a = document.querySelector('#proso_table_01 a');
        a.href=this.options[this.selectedIndex].getAttribute('value-url');
        a.textContent=this.value!='0'?'ссылка со стилем ak_12_20':'';
   };
</script>

Александр83 23.10.2017 18:36
вопрос отменен решил сам!, кому интересно то так!!!
document.querySelector('#proso_table').onchange = function() {
        var a = document.querySelector('#proso_table_01 a');
        a.href=this.options[this.selectedIndex].getAttribute('value-url');
        a.textContent=this.value!='0'?'ссылка со стилем ak_12_20':'';
        document.querySelector('a').classList.add('ak_12_20');
   };

Александр83 28.10.2017 17:41
Dilettante_Pro,
подскажите как это реализовать?

есть select и button, необходимо Атрибут fox-id от выбранного option средствами JS передать на кнопку button в атрибут data-item?
<select class="proso" id="proso">
<option value="0">не выбран ID</option> 
<option value="1" fox-id="1">Выбран ID №1</option>
<option value="2" fox-id="2">Выбран ID №2</option>
</select>
 
<button
id="button_fox"
class="fox"
data-item="здесь необходимо вставить значение атрибута fox-id от выбранного option"
>
</button>

Nexus 28.10.2017 17:49 
var select=document.getElementById('proso');
select.addEventListener('change',function(){
    document.getElementById('button_fox').setAttribute('data-item',this.value);
},false);
select.dispatchEvent(new Event('change'));

Александр83 28.10.2017 19:24
Nexus,
спасибо


Часовой пояс GMT +3, время: 11:49.