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

Question

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

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

Вот мой код:

$(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, однако селектор для конкретного тега option возвращает ноль.Есть ли проблема с моим синтаксисом или мой код не работает так, как я думаю?Большое спасибо.

Answer 1

Вы можете уменьшить его и решить проблему выбора одновременно, просто используйте .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="". Другая оптимизация заключается в том, что для упрощения обслуживания используется карта объектов:)

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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