Question

有一项任务。有必要在3（输入无线电）之间的第一步中给用户一个选择。在他选择了他需要的一个项目之后，第二列出现了新列（输入无线电）。并且在第二步中的选择出现后，最后选择的第三步（输入无线电）。

重要的是，每个所选项目的第二步和第三步都是新的。

帮助解决此问题。

我发现了类似的任务，但它对我的目的来说有点不合适。 Updating button content based on selection for example

＆＃13;

$(document).ready(function(){
  var selects = $('.drop-down');
  selects.not(':eq(0)').prop('disabled', true); 
  selects.on('change', function() {
    var select = $(this),
        currentIndex = selects.index(select),
        nextIndex = currentIndex + 1;

    if (currentIndex != selects.length - 1) {
      selects.slice(nextIndex)
             .val('')
             .prop('disabled', true);

      selects.eq(nextIndex).prop('disabled', select.val() === '');
    }

  })

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="v1" class="drop-down">
  <option value="">--Выберите Вид рекламы--</option>
  <option value="1">Объявление [Товар / Услуга]</option>
  <option value="2">Визитная карточка</option>
  <option value="3">Статический баннер</option>
</select><br>
<select name="v2" class="drop-down">
  <option value="">--Выберите раздел--</option>
  <option value="1">Товары</option>
  <option value="2">Услуги</option>
  <option value="3">Компании</option>
  <option value="4">Биржа</option>
  <option value="5">Публикации</option>
</select><br>
<select name="v3" class="drop-down">
  <option value="">--Конечная категория--</option>
  <option value="1">Весь раздел</option>
  <option value="2">Главная страница</option>
  <option value="3">Категория товара</option>
  <option value="4">Отдельный товар</option>
</select>

＆＃13;

Answer 1

希望这是你想要的：

将仅使用CSS在每个选择和下一个选择之间创建依赖关系。这可能不是一个完美的解决方案，但在某些情况下它可能就足够了。

每个select必须具有required属性才能生效，并且它们之间不应存在HTML元素。

您可以将此方法扩展到您想要的任何内容，包括您提到的那些单选按钮。只需将它们添加到HTML并稍微更改CSS。目前还不清楚你究竟想要什么，但这可能会让你有90％的方式来实现它。

select { margin:1em; display:block; }

/* block all but the first "select" elements from being used (like "disabled" */
select:not(:first-child){ opacity:.3; pointer-events:none; }

/* show the next "select" if any select has a value */
select:valid + select{ opacity:1; pointer-events:auto; }
select:invalid{  }

<select name="v1" required>
  <option value="">--Выберите Вид рекламы--</option>
  <option value="1">Объявление [Товар / Услуга]</option>
  <option value="2">Визитная карточка</option>
  <option value="3">Статический баннер</option>
</select>
<select name="v2" required>
  <option value="">--Выберите раздел--</option>
  <option value="1">Товары</option>
  <option value="2">Услуги</option>
  <option value="3">Компании</option>
  <option value="4">Биржа</option>
  <option value="5">Публикации</option>
</select>
<select name="v3" required>
  <option value="">--Конечная категория--</option>
  <option value="1">Весь раздел</option>
  <option value="2">Главная страница</option>
  <option value="3">Категория товара</option>
  <option value="4">Отдельный товар</option>
</select>

Answer 2

试试这个：

jsFiddle 示例：https://jsfiddle.net/7c297a3w/

<强>的Javascript

$('input[type="radio"][name^="group-"]').change(function() {
  var container = $(this).parent().parent();
  var nextSiblings = container.nextAll();
  nextSiblings.removeClass('valid');
  nextSiblings.find('input[type="radio"]').attr('checked', false);
  container.addClass('valid');
});

<强> CSS

[id^="step-"] {
  display: table-cell;
  width: 1%;
}

[id^="step-"]:not(:first-child) label {
  opacity: .3;
  pointer-events: none;
}

[id^="step-"].valid+[id^="step-"] label {
  opacity: 1;
  pointer-events: auto;
}

label {
  display: block;
}

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="step-1">
  Step 1
  <label><input type="radio" name="group-1" value="1" required>1</label>
  <label><input type="radio" name="group-1" value="2">2</label>
  <label><input type="radio" name="group-1" value="3">3</label>
  <label><input type="radio" name="group-1" value="4">4</label>
  <label><input type="radio" name="group-1" value="5">5</label>
</div>
<div id="step-2">
  Step 2
  <label><input type="radio" name="group-2" value="a" required>a</label>
  <label><input type="radio" name="group-2" value="b">b</label>
  <label><input type="radio" name="group-2" value="c">c</label>
  <label><input type="radio" name="group-2" value="d">d</label>
  <label><input type="radio" name="group-2" value="e">e</label>
</div>
<div id="step-3">
  Step 3
  <label><input type="radio" name="group-3" value="i" required>i</label>
  <label><input type="radio" name="group-3" value="ii">ii</label>
  <label><input type="radio" name="group-3" value="iii">iii</label>
  <label><input type="radio" name="group-3" value="iv">iv</label>
  <label><input type="radio" name="group-3" value="v">v</label>
</div>

如何逐步选择？

2 个答案:

希望这是你想要的：