jQuery: что-то сделать, если существует элемент select

Question

Эй, я посмотрел вокруг на Stack Overflow и попробовал несколько других попыток сделать это, но я просто не смог заставить это работать.

У меня есть элемент select, подобный этому:

<select id="slct_firstCat" name="slct_firstCat" size="15">
</select>

Отображается только после завершения специального запроса AJAX, поэтому этот элемент select НЕ загружается с DOM исходной страницы, он загружается как отдельный запрос AJAX после загрузки главной страницы.

Я в основном хочу сделать это ...

if (/* select element exists */) {
  // Then change the colour of a div to green
} else {
  // Change the colour to red
}

Но помните, это должно работать после загрузки страницы.Я могу нажать кнопку выбора, чтобы при необходимости запустить функцию JS.

Я попробовал этот код ниже, но не смог заставить его работать:

if ($(".element1").length > 0 || $(".element2").length > 0 {
  // code
}

Так что, в принципе, если элемент selectсуществует, затем измените цвет вкладки на зеленый, иначе измените его на красный.

Answer 1

Вы должны поместить свой код в успешный обратный вызов jQuery.ajax().И часть > 0 не нужна в $('.element1').length > 0, поскольку, в отличие от Ruby, 0 и "" также ложные в JavaScript.

jQuery.ajax({
    url: 'example.php',
    success: function () {    
        if ($('#slct_firstCat').length) {
            $('#myDiv').css('color', 'green');
        } else {
            $('#myDiv').css('color', 'red');
        }
});

Answer 2

Вы можете попробовать что-то вроде:

 if ($('select#slct_firstCat').length) {
    // ... stufff....
  }

Answer 3

переместите блок if на успех ajax, он будет работать

, просто приведя пример

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
   if ($(".element1").length > 0 || $(".element2").length > 0 {
  ...stuff...
}
  }
});

Answer 4

Вам следует изменить цвета, когда ваши события происходят, то есть когда ваш вызов ajax завершается успешно, запускается или когда вы запускаете другое событие. В любом случае, вы можете использовать этот код, это не самый лучший способ сделать это, но соответствует вашим потребностям:

$(document).ready(function(){
  setInterval(function(){
      if($("#slct_firstCat").size() > 0)
          $("#divColour").css("backgroundColor", "green");
      else
          $("#divColour").css("backgroundColor", "red");
  }, 100);
});