Как сделать одно раскрывающееся меню невидимым или отображаемым: нет, если другое выпадающее меню находится на определенном выделе?

У меня есть два выпадающих списка: один для штата, один для города. Я хочу сделать так, чтобы, когда раскрывающийся список State находится по умолчанию --State-ed value ( ), выпадающее меню City даже не видно. Но в противном случае, пока вы выберете какое-либо из состояний, появится раскрывающийся список.if --State-- (default value) is selected, make City dropdown invisible

Мой текущий код таков, что опции «Город» $ ( документ ). ready ( function () { var optarray = $ ( "#layout_select" ). children ( 'option' ). map ( function () { return { "value" : this . value , "option" : "<option value = ' " + this . value + " '> " + this . text + "</ option>" } }) $ ( "#column_select" ). change ( function () { $ ( "#layout_select" ). children ( 'option' ). remove (); var addoptarr = []; for ( i = 0 ; i < optarray . length ; i ++) { if ( optarray [ я .] значение . IndexOf ( $ ( это ). вал ()) > - 1 ) { addoptarr . толкать ( optarray [ я ]. опция ); } } $ ( "#layout_select" .) HTML ( addoptarr . присоединиться ( '' )) }). change (); }) в зависимости от выбранного вами состояния. По причинам, которые я не понимаю, <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > </ script> <select name = "column_select " id = " column_select " style = " height : 35px ; " class = " required " title = " * Укажите свое местоположение " > <option selected value = " col0 " > - State - </ option> < значение опции = "col1" > Alabama </ option> <option value = "col2" > Florida </ option> <option value = "col3" > Texas </ option> </ select> <select name = "layout_select" id = " layout_select " style = " height : 35px ; " > <option value = " col0 " > - City - </ option> <option value = " col1 " > Montgomery </ option> <option value = " col2 " > Orlando </ option> <option value = "col3" > Dallas </ option> </ select> JSFiddle не работает, но работает в скобках. http://jsfiddle.net/a70zjg9p/4/

Мне просто нужна помощь:

$(document).ready(function() {
  //get the cities and detach them, since state presumably starts
  //as --State--
  var $citySelect = $("#layout_select");
  var $cities = $citySelect.children().detach();

  $("#column_select").on('change', function(e) {
    //remove any cities that were previously re-attached
    $cities.detach();
    
    if (e.target.value === 'col0') {
      //col0 is --State--, hide the cities
      $citySelect.hide();
    } else {
      //find all the cities for the state and re-attach them
      $citySelect.append(
        $cities.filter(function(){ return this.value === e.target.value })
      );
    
      //show the cities
      $citySelect.show();
    }
  }).change();
})

код поверх кода, который у меня уже есть.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
  <option selected value="col0">-- State --</option>
  <option value="col1">Alabama</option>
  <option value="col2">Florida</option>
  <option value="col3">Texas</option>
</select>



<select name="layout_select" id="layout_select" style="height:35px;">
  <option value="col0">-- City --</option>
  <option value="col1">Montgomery</option>
  <option value="col2">Orlando</option>
  <option value="col3">Dallas</option>
</select>
col0

javascript,jquery,html,dropdown,

2

Ответов: 5

$ ( документ ). ready ( function () { var optarray = $ ( "#layout_select" ). children ( 'option' ). map ( function () { return { "value" : this . value , "option" : "<option value = ' " + this . value + " '> " + this . text + " </ option> " } }) $ ( " #column_select " ). change ( function () { var addoptarr = []; var citySelect = $ ( " #layout_select " ), для ( i = 0 ; i < optarray . length ; i ++) { if ( optarray [ i ]. value . indexOf ( $ ( this ). val ()) > - 1 ) { addoptarr . push ( optarray [ i ]. option ); } } citySelect . html ( addoptarr . join ( '' )) // ПРОВЕРЬТЕ, ЕСЛИ РАВНО ДЛЯ 'col0' if ( this . value == "col0" ) { citySelect . hide () ; } else { citySelect . show (); } }). change (); }) ответ полезен (щелкните еще раз, чтобы отменить) "> голосование 1 принят

Подробнее о том, что он делает на каждом шаге, см. Комментарии в логике ниже.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
        <option selected value="col0">-- State --</option>    
        <option value="col1">Alabama</option>    
        <option value="col2">Florida</option>    
        <option value="col3">Texas</option>    
    </select>
    
    
    
    <select name="layout_select" id="layout_select" style="height:35px; display: none">
        <option value="col0">-- City --</option>    
        <option value="col1">Montgomery</option>
        <option value="col2">Orlando</option>
        <option value="col3">Dallas</option>
    </select>
if (this.value == ...)

1

Проверьте выбранное значение первого выбора, если оно равно this, затем скройте второй выбор, если нет, покажите его.

change
this

Как видите, selectя использую, thisпотому что в текущем контексте ( changeтриггер элемента) thisэквивалентен элементу, в этом случаеselect

1

Просто проверьте текст выбранного параметра select и скройте, #layout_selectесли он равен "-- State --".

$(document).ready(function() {
        var optarray = $("#layout_select").children('option').map(function() {
            return {
                "value": this.value,
                "option": "<option value='" + this.value + "'>" + this.text + "</option>"
            }
        })
         $('#layout_select').hide();
        $("#column_select").change(function() {
            $("#layout_select").children('option').remove();
            var addoptarr = [];
            for (i = 0; i < optarray.length; i++) {
                if (optarray[i].value.indexOf($(this).val()) > -1) {
                    addoptarr.push(optarray[i].option);
                }
            }
            $("#layout_select").html(addoptarr.join(''));
            if($('#column_select').find(":selected").text()=="-- State --"){
        $('#layout_select').hide();
     } else {
       $('#layout_select').show();
     }
        }).change();
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
        <option selected value="col0">-- State --</option>    
        <option value="col1">Alabama</option>    
        <option value="col2">Florida</option>    
        <option value="col3">Texas</option>    
    </select>
    
    
    
    <select name="layout_select" id="layout_select" style="height:35px;">
        <option value="col0">-- City --</option>    
        <option value="col1">Montgomery</option>
        <option value="col2">Orlando</option>
        <option value="col3">Dallas</option>
    </select>

1

если я правильно понял, когда выбран первый вариант (--State--), вам нужно скрыть раскрывающееся меню города ...

для этого вы можете использовать следующий скрипт:

http://jsfiddle.net/a70zjg9p/10/

$(document).ready(function() {
  var $state = $("#column_select"),
    $city = $("#layout_select");

  $city.hide();

  $state.on('change', function() {
    if ($(this).val() == "col0") {
      $city.hide();
    } else {
      $city.show();
    }
  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
  <option selected value="col0">-- State --</option>
  <option value="col1">Alabama</option>
  <option value="col2">Florida</option>
  <option value="col3">Texas</option>
</select>



<select name="layout_select" id="layout_select" style="height:35px;display:none">
  <option value="col0">-- City --</option>
  <option value="col1">Montgomery</option>
  <option value="col2">Orlando</option>
  <option value="col3">Dallas</option>
</select>

1

Это работает

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut114</title>
    <style type="text/css">
        .Hide {
            visibility: hidden;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var optarray = $("#layout_select").children('option').map(function () {
                return {
                    "value": this.value,
                    "option": "<option value='" + this.value + "'>" + this.text + "</option>"
                }
            })
            $("#column_select").change(function () {
                if ($('#column_select option:selected').text() != "-- State --") {
                    $("#layout_select").removeClass("Hide");

                    $("#layout_select").children('option').remove();
                    var addoptarr = [];
                    for (i = 0; i < optarray.length; i++) {
                        if (optarray[i].value.indexOf($(this).val()) > -1) {
                            addoptarr.push(optarray[i].option);
                        }
                    }
                    $("#layout_select").html(addoptarr.join(''))
                }
                else {
                    $("#layout_select").addClass("Hide");
                }
            }).change();
        })
    </script>
</head>
<body>
    <select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
        <option selected value="col0">-- State --</option>
        <option value="col1">Alabama</option>
        <option value="col2">Florida</option>
        <option value="col3">Texas</option>
    </select>
    <select name="layout_select" id="layout_select" style="height:35px;">
        <option value="col0">-- City --</option>
        <option value="col1">Montgomery</option>
        <option value="col2">Orlando</option>
        <option value="col3">Dallas</option>
    </select>
</body>
</html>
JavaScript, JQuery, HTML, выпадающий,
Похожие вопросы
Яндекс.Метрика