Форум

nikto93i7 · #1 (**permalink**) 05.08.2015, 15:23

Привет всем!

Помогите пожалуйста с решением вопроса, не получается что-то...
С помощью jquery реализовать выбор.
Смысл в том чтоб при выборе значения <input type="radio"> выдавались соответствующие ему блоки <option>

2015-08-05 15-11-03 Скриншот экрана.png

<div class="value_two">
<label class="radio1"> <input id="radio1" type="radio" name="two" checked="checked">
<span class="radio-text1"></span>
</label> 
<label class="radio2"> <input id="radio2" type="radio" name="two">
<span class="radio-text2"></span>
</label> 
<label class="radio3"> <input id="radio3" type="radio" name="two">
<span class="radio-text3"></span>
</label> 
<label class="radio4"> <input id="radio4" type="radio" name="two">
<span class="radio-text4"></span>
</label>
</div>

<select id="char_platform" class="option_menu_style">
<option class="car3_5" value="1">3.5t 32 kWh</option>
<option class="car3_5" value="2">3.5t 42 kWh</option>
<option class="car3_5" value="3">3.5t 52 kWh</option>
									/**/
<option class="car5_5" value="4">5.5t 32 kWh</option>
<option class="car5_5" value="5">5.5t 42 kWh</option>
<option class="car5_5" value="6">5.5t 52 kWh</option>
									/**/
<option class="car9_5" value="7">9.5t 52 kWh</option>
<option class="car9_5" value="8">9.5t 62 kWh</option>
									/**/
<option class="car26" value="9">26t 60 kWh</option>
<option class="car26" value="10">26t 62 kWh</option>
</select>

Буду благодарен за помощь!!!

Decode · #2 (**permalink**) 05.08.2015, 16:50

nikto93i7, так?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <div class="value_two">
    <label class="radio1">
      <input id="radio1" type="radio" name="two" checked="checked" />
      <span class="radio-text1"></span>
    </label> 
    <label class="radio2">
      <input id="radio2" type="radio" name="two" />
      <span class="radio-text2"></span>
    </label> 
    <label class="radio3">
      <input id="radio3" type="radio" name="two" />
      <span class="radio-text3"></span>
    </label> 
    <label class="radio4">
      <input id="radio4" type="radio" name="two" />
      <span class="radio-text4"></span>
    </label>
    <label class="radio5">
      <input id="radio5" type="radio" name="two" />
      <span class="radio-text1"></span>
    </label> 
    <label class="radio6">
      <input id="radio6" type="radio" name="two" />
      <span class="radio-text2"></span>
    </label> 
    <label class="radio7">
      <input id="radio7" type="radio" name="two" />
      <span class="radio-text3"></span>
    </label> 
    <label class="radio8">
      <input id="radio8" type="radio" name="two" />
      <span class="radio-text4"></span>
    </label>
    <label class="radio9">
      <input id="radio9" type="radio" name="two" />
      <span class="radio-text3"></span>
    </label> 
    <label class="radio10">
      <input id="radio10" type="radio" name="two" />
      <span class="radio-text4"></span>
    </label>
  </div>

  <select id="char_platform" class="option_menu_style">
    <option class="car3_5" value="1">3.5t 32 kWh</option>
    <option class="car3_5" value="2">3.5t 42 kWh</option>
    <option class="car3_5" value="3">3.5t 52 kWh</option>

    <option class="car5_5" value="4">5.5t 32 kWh</option>
    <option class="car5_5" value="5">5.5t 42 kWh</option>
    <option class="car5_5" value="6">5.5t 52 kWh</option>

    <option class="car9_5" value="7">9.5t 52 kWh</option>
    <option class="car9_5" value="8">9.5t 62 kWh</option>

    <option class="car26" value="9">26t 60 kWh</option>
    <option class="car26" value="10">26t 62 kWh</option>
  </select>

  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script>
    $('input[type="radio"]').change(function( event ) {
      var inpValue = event.target.id.match(/\d+/);
      $("#char_platform option[value="+ inpValue + "]").attr("selected", "selected");
    });
  </script>
</body>
</html>

nikto93i7 · #3 (**permalink**) 05.08.2015, 17:01

Спасибо за ответ, но немного не то...
Всего должно быть 4-е "radio" и при нажатии на один, в <select> будет оставаться только те <option> которые принадлежать данному "radio"
т.е.
кода выбран

<label class="radio1"> <input id="radio1" type="radio" name="two" checked="checked">
<span class="radio-text1"></span>
</label>

показываются только

<option class="car3_5" value="1">3.5t 32 kWh</option>
<option class="car3_5" value="2">3.5t 42 kWh</option>
<option class="car3_5" value="3">3.5t 52 kWh</option>

рони · #4 (**permalink**) 05.08.2015, 17:12

nikto93i7,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div class="value_two">
<label class="radio1"> <input id="radio1" type="radio" name="two" checked="checked">
<span class="radio-text1"></span>
</label>
<label class="radio2"> <input id="radio2" type="radio" name="two">
<span class="radio-text2"></span>
</label>
<label class="radio3"> <input id="radio3" type="radio" name="two">
<span class="radio-text3"></span>
</label>
<label class="radio4"> <input id="radio4" type="radio" name="two">
<span class="radio-text4"></span>
</label>
</div>
<select id="char_platform" class="option_menu_style" size="8">
<option class="car3_5" value="1">3.5t 32 kWh</option>
<option class="car3_5" value="2">3.5t 42 kWh</option>
<option class="car3_5" value="3">3.5t 52 kWh</option>
									/**/
<option class="car5_5" value="4">5.5t 32 kWh</option>
<option class="car5_5" value="5">5.5t 42 kWh</option>
<option class="car5_5" value="6">5.5t 52 kWh</option>
									/**/
<option class="car9_5" value="7">9.5t 52 kWh</option>
<option class="car9_5" value="8">9.5t 62 kWh</option>
									/**/
<option class="car26" value="9">26t 60 kWh</option>
<option class="car26" value="10">26t 62 kWh</option>
</select>
<script>
var sel = document.querySelector(".option_menu_style");
o = sel.querySelectorAll("option");
inp = document.querySelectorAll(".value_two [name='two']");
cls = ["car3_5", "car5_5", "car9_5", "car26"];
Array.prototype.forEach.call(inp, function(a, c) {
    a.onclick = function() {
        for (var a = cls[c], b = sel.options.length = 0; b < o.length; b++) o[b].classList.contains(a) && sel.options.add(o[b]);
        sel.options[0].selected = !0
    };
    a.checked && a.onclick()
});
</script>
</body>
</html>

Decode · #5 (**permalink**) 05.08.2015, 17:23

nikto93i7, как-то так...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    optgroup {
      display: none;
    }
  </style>
</head>
<body>
  <div class="value_two">
    <label class="radio1">
      <input id="radio1" type="radio" name="two" checked="checked" />
      <span class="radio-text1"></span>
    </label> 
    <label class="radio2">
      <input id="radio2" type="radio" name="two" />
      <span class="radio-text2"></span>
    </label> 
    <label class="radio3">
      <input id="radio3" type="radio" name="two" />
      <span class="radio-text3"></span>
    </label> 
    <label class="radio4">
      <input id="radio4" type="radio" name="two" />
      <span class="radio-text4"></span>
    </label>
  </div>

  <select id="char_platform" class="option_menu_style">
    <optgroup data-id="1">
      <option class="car3_5" value="1">3.5t 32 kWh</option>
      <option class="car3_5" value="2">3.5t 42 kWh</option>
      <option class="car3_5" value="3">3.5t 52 kWh</option>
    </optgroup>

    <optgroup data-id="2">
      <option class="car5_5" value="4">5.5t 32 kWh</option>
      <option class="car5_5" value="5">5.5t 42 kWh</option>
      <option class="car5_5" value="6">5.5t 52 kWh</option>        
    </optgroup>

    <optgroup data-id="3">
      <option class="car9_5" value="7">9.5t 52 kWh</option>
      <option class="car9_5" value="8">9.5t 62 kWh</option>
    </optgroup>

    <optgroup data-id="4">
      <option class="car26" value="9">26t 60 kWh</option>
      <option class="car26" value="10">26t 62 kWh</option>
    </optgroup>
  </select>

  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script>
    $('#char_platform option:selected').parent().css('display', 'block');

    $('input[type="radio"]').change(function( event ) {
      var inpValue = event.target.id.match(/\d+/);

      $('optgroup').each(function() {
        $(this).css('display', 'none');
        $(this).attr('data-id') == inpValue && $(this).css('display', 'block');
      });
    });
  </script>
</body>
</html>

nikto93i7 · #6 (**permalink**) 05.08.2015, 17:57

Даже два отличных ответа!!!))) Большое спасибо!)

Форум

Справочник

Discord чат

Курсы javascript