1

введите сюда описание изображения

Есть выбор пола и ниже выбор семейного положения. Во втором пункты выборы должны меняться в зависимости от пола человека.

            <div class="form-group label-floating is-select mt-3 mb-1">
                <label class="control-label">Семейное положение</label>
                <select>
                    <option value="0">Не выбрано</option>

                    <option value="1" data-gender="man">Не женат</option>
                    <option value="2" data-gender="woman">Не замужем</option>

                    <option value="3">Встречаюсь</option>

                    <option value="4" data-gender="man">Помолвлен</option>
                    <option value="5" data-gender="woman">Помолвлена</option>

                    <option value="6" data-gender="man">Женат</option>
                    <option value="7" data-gender="woman">Замужем</option>

                    <option value="8">В гражданском браке</option>

                    <option value="9" data-gender="man">Влюблён</option>
                    <option value="10" data-gender="woman">Влюблена</option>

                    <option value="11">Всё сложно</option>
                    <option value="12">В активном поиске</option>
                </select>
            </div>

Здесь мы видим, что есть пункты без data-gender - это общие (они не меняются) и есть с data-gender со значением man - мужские и woman - женские

Это функция смены пола:

$(document).on("click", '.c-accent.account-gender', function() {
  var gender = $('.c-accent.account-gender').attr('data-gender');

  if (gender == 'man') {
      $(this).attr('data-gender','woman');
      $(this).html('Женский');
  } else {
      $(this).attr('data-gender','man');
      $(this).html('Мужской');
  }

});

и сама кнопка: <a href="javascript:void(0)" class="c-accent account-gender" data-gender="man">Мужской</a>

Вопрос: Как в select скрыть все элементы с data-gender="woman", т.к стоит мужской, а при смене пола сделать наоборот скрыть все с data-gender="man"?

2
  • "функция смены пола" - смешно звучит. Лучше - "функция выбора пола".
    – user176262
    24 апр 2019 в 14:55
  • (◕‿◕) ну да. Спасибо, за помощь 24 апр 2019 в 14:58

1 ответ 1

1

$(document).on("click", '.c-accent.account-gender', function() {
  var gender = $(this).data('gender');

  $("#status option").show();
  $("#status option").filter(function() {
    return $(this).data('gender') && $(this).data('gender') != gender;
  }).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Gender
<input type="radio" name="gender" class="c-accent account-gender" data-gender="man" />Male
<input type="radio" name="gender" class="c-accent account-gender" data-gender="woman" />Female
<div class="form-group label-floating is-select mt-3 mb-1">
  <label class="control-label">Семейное положение</label>
  <select id="status">
    <option value="0">Не выбрано</option>

    <option value="1" data-gender="man">Не женат</option>
    <option value="2" data-gender="woman">Не замужем</option>

    <option value="3">Встречаюсь</option>

    <option value="4" data-gender="man">Помолвлен</option>
    <option value="5" data-gender="woman">Помолвлена</option>

    <option value="6" data-gender="man">Женат</option>
    <option value="7" data-gender="woman">Замужем</option>

    <option value="8">В гражданском браке</option>

    <option value="9" data-gender="man">Влюблён</option>
    <option value="10" data-gender="woman">Влюблена</option>

    <option value="11">Всё сложно</option>
    <option value="12">В активном поиске</option>
  </select>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.