Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Переключение значений select в зависимости от значения класса div (https://javascript.ru/forum/dom-window/47328-pereklyuchenie-znachenijj-select-v-zavisimosti-ot-znacheniya-klassa-div.html)

golopogos 19.05.2014 13:35

Переключение значений select в зависимости от значения класса div
 
Здравствуйте, затрудняюсь реализовать сам. Прошу вашей помощи.

Есть два блока div:

<li id="flag1" class="btn">
<div class="iradio checked"></div>
</li>
<li id="flag2" class="btn">
<div class="iradio"></div>
</li>


в которых попеременно происходит обмен значений классов div: .iradio.checked и .iradio

Нужно как то отслеживать этот обмен классами и скриптом присваивать значение полю select - Стандарт или Информ. Код меню ниже:

<select class='k_select' id='k_input_field_30_4700' value='Стандарт' >
	<option value=''></option>
        <option selected value='Стандарт'>Стандарт</option>
        <option value='Информ'>Информ</option>
</select>

рони 19.05.2014 14:44

Цитата:

Сообщение от golopogos
в которых попеременно происходит обмен значений классов

а меняет классы какой код?

golopogos 19.05.2014 15:47

Это ссылка на скрипт, вставляется в шапку:
<script src='//yagool.ru/blurb/icheck.js'></script>


Сам html код:

<li id="flag1" class="btn">
<div class="iradio checked"></div>
</li>
<li id="flag2" class="btn">
<div class="iradio"></div>
</li>

<select class='k_select' id='k_input_field_30_4700' value='Стандарт' >
	<option value=''></option>
        <option selected value='Стандарт'>Стандарт</option>
        <option value='Информ'>Информ</option>
</select>


Скрипт обработчик:

<script>$(document).ready(function(){$(".pricePlans input").each(function(){var a=$(this),b=a.next(),c=b.text();b.remove();a.iCheck({radioClass:"iradio",insert:'<div class="icheck-icon"></div>'+c})})});</script>

рони 19.05.2014 16:07

golopogos,
пока информации нуль - если вы используите плагин https://github.com/fronteed/iCheck - читайте документацию там всё есть -- а пока вы демонстрируите куски кода никак несвязанные с друг другом -- сделайте макет тут или в песочнице.

golopogos 19.05.2014 16:23

Ну а если откинуть все скрипты и т.д. И взять за основу первый пост?..

рони 19.05.2014 16:38

golopogos,
так сам там класс то появится то исчезнет?

рони 19.05.2014 18:28

golopogos,
:cray:
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://fronteed.com/iCheck/icheck.js?v=1.0.1"></script>
 <link rel="stylesheet" type="text/css" href="http://fronteed.com/iCheck/demo/css/normalize.css">
  <style type="text/css">
/* green */
.iradio_flat-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(http://fronteed.com/iCheck/skins/square/green.png) no-repeat;
    border: none;
    cursor: pointer;
}

.iradio_flat-green {
    background-position: -0px 0;
}
    .iradio_flat-green.checked {
        background-position: -48px 0;
    }
    .iradio_flat-green.disabled {
        background-position: -132px 0;
        cursor: default;
    }
    .iradio_flat-green.checked.disabled {
        background-position: -154px 0;
    }


  </style>

</head>

<body>
 <label for="baz[1]">Стандарт</label>
<input type="radio" name="quux[2]" id="baz[1]" checked data-info="Стандарт">

<label for="baz[2]">Информ</label>
<input type="radio" name="quux[2]" id="baz[2]" data-info="Информ">

<select class='k_select' id='k_input_field_30_4700' value='Стандарт' >
	<option value=''></option>
        <option selected value='Стандарт'>Стандарт</option>
        <option value='Информ'>Информ</option>
</select>
<script>
	$('input').iCheck({radioClass: "iradio_flat-green"});
	$('input').on('ifChecked', function(event)
	  {
	    $('#k_input_field_30_4700').val($(this).data('info'));
	  }
	);
</script>
</body>

</html>

golopogos 19.05.2014 20:46

Не работает)

Посмотрите, собрал макет на Фидле:

http://jsfiddle.net/hdBRX/2/

рони 19.05.2014 20:53

golopogos,
а где там код из 7 поста?

golopogos 20.05.2014 08:23

Большое Вам спасибо, но представленный Вами код не совсем подходит. И как его приспособить - ума не приложу) Макет на Фидле - это то что необходимо подправить. Выложил для наглядности. Функцию чекбоксов выполняют панели выбора тарифа.


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