Селектор jQuery для атрибута значения тега параметра возвращает значение null

Я пытаюсь изменить выбранный параметр в раскрывающемся списке выбора с помощью jQuery. Я установил его так, чтобы он находил хэш-тег в конце URL-адреса и на основе этого хэш-тега изменял выбранный параметр в поле выбора.

Большая часть моего кода функциональна, он успешно находит хеш-тег и выполняет соответствующий ему оператор if. Однако, когда он переходит к выполнению раздела «тогда» оператора, когда он переходит к селектору для параметра (который использует селектор атрибута на основе атрибута значения тега параметра), он возвращает значение null. Если разобрался с firebug, то в консоли пишет, что селектор нулевой.

Вот мой код:

$(document).ready(function() {
    var $hash = window.location.hash
    if($hash == "#htmlcss") {
    $('option[value="HTML/CSS Coding"]').attr("selected","selected")
    }
    if($hash == "#php") {
    $('option[value="PHP Coding"]').attr("selected","selected")
    }
    if($hash == "#jscript") {
    $('option[value="Javascript and jQuery Coding"]').attr("selected","selected")
    }
    if($hash == "#improv") {
    $('option[value="General Website Improvements"]').attr("selected","selected")
    }
    if($hash == "#towp") {
    $('option[value="Website Conversion to Wordpress"]').attr("selected","selected")
    }
    if($hash == "#wptheme") {
    $('option[value="Wordpress Theme Design"]').attr("selected","selected")
    }
    if($hash == "#complete") {
    $('option[value="Complete Website Creation"]').attr("selected","selected")
    }
    if($hash == "#server") {
    $('option[value="Web Server Configuration"]').attr("selected","selected")
    }
});

Итак, чтобы уточнить, когда я ввожу URL-адрес, который заканчивается, например, хэш-тегом #php, желаемое действие не происходит, что изменит параметр «PHP Coding» на выбранный с помощью атрибута «selected» html, однако селектор для конкретного тега параметра возвращает значение null. Есть ли проблема с моим синтаксисом или мой код работает не так, как я думаю? Большое спасибо.


javascript forms html jquery jquery-selectors
person Ben Kulbertis    schedule 09.06.2010    source источник
comment
Вы уверены, что это значения, а не текст текста элементов <option>? Кроме того, как называется <select>, есть гораздо более простой способ сделать это :)   -  person Nick Craver    schedule 09.06.2010

Ответы (4)


arrow_upward
5
arrow_downward

Вы можете сократить его и решить проблему с селектором одновременно, просто используйте .val() следующим образом:

var hashmap  = { 
  htmlcss: "HTML/CSS Coding",
  php: "PHP Coding",
  jscript: "Javascript and jQuery Coding",
  improv: "General Website Improvements",
  towp: "Website Conversion to Wordpress",
  wptheme: "Wordpress Theme Design",
  complete: "Complete Website Creation",
  server: "Web Server Configuration"
};

$(function() {
    var $hash = window.location.hash.replace('#','');
    $("#IDOfSelectElement").val(hashmap[$hash]);
});

Этот подход устанавливает значение <select> (находя его по идентификатору) с помощью .val(), который выбирает <option> со значением, соответствующим тому, что вы передали, это также решает проблемы с экранированием. Однако я не уверен, что значения, которые у вас есть, являются фактической частью value="", они кажутся текстом <option>... убедитесь, что вы используете часть value="". Другая оптимизация заключается в том, что здесь используется карта объектов, чтобы упростить обслуживание :)

person Nick Craver    schedule 09.06.2010
comment
Я собирался ответить очень похожим комментарием... Ник совершенно прав. Я бы также добавил, что использование .val() — это единственный способ, который фактически работает при установке того, какой параметр выбран в полях выбора. - person Dan McDougall; 09.06.2010
comment
Это сработало чудесно! Большое спасибо. Мне бы никогда не пришло в голову использовать этот метод, он намного элегантнее, компактнее, а главное, функциональнее! Я полагаю, мне нужно больше изучать jQuery API. Еще раз спасибо Ник! - person Ben Kulbertis; 09.06.2010

arrow_upward
1
arrow_downward

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

$('option[value=HTML\\/CSS Coding]').attr("selected","selected")

Дополнительную информацию см. на странице http://api.jquery.com/category/selectors/.

person azatoth    schedule 09.06.2010

arrow_upward
0
arrow_downward

Возможно, просто добавьте этот код перед вашими операторами if:

$('option').removeAttr('selected');

Однако знайте, что если у вас есть более одного select на странице, это повлияет на них всех.

person artlung    schedule 09.06.2010

arrow_upward
0
arrow_downward

Почему бы не назначить идентификатор для каждого варианта выбора? Это сделало бы ваш код более аккуратным

$(document).ready(function() {
   $(window.location.hash).attr("selected","selected");
});
person Nazariy    schedule 09.06.2010