Можно ли сделать якорь на опцию?

Question

[Александр Коновалов]

Здравствуйте! Требуется сделать якорь с одной страницы на страницу с формой, где есть select (выпадающий список) с опциями. Якорь нужен на конкретную опцию из этого списка, чтобы при переходе, в форме сразу была выбрана эта опция. Это возможно?

Answer 1

[Николай Чуприк]

Если целевая страница ваша, и вы можете дописать на ней скрипт, то да.

<select>
    ...
   <option id = 'setthisvalue' ...>...</option>
   ...
</select>

$( function()  {
    if ( location.hash.indexOf( 'setthisvalue' ) > -1 )
      $( '#setthisvalue' ).attr( 'selected', true );
} )

Или даже так (если вы уверены в "чистоте" ссылки):

$( function()  {
  $( location.hash ).attr( 'selected', true );
} )

Или вообще инлайн (в случае, если нет выбранных опций по умолчанию)

<select>
    ...
   <option onload = "this.selected = location.hash === '#setthisvalue'" ...>...</option>
   ...
</select>

Comments

[Александр Коновалов]

Николай Чуприк а как это к ссылке прикрепить?

[Александр Коновалов]

Николай Чуприк я сейчас порылся в коде и обнаружил, что не все так просто.

<select name="ctype" class="j-required" id="j-contacts-form-subject"><?= $types ?></select>

А сами данные берутся из другого файла:

protected function getContactTypes($options = false)
    {
        $types = array(
            self::TYPE_SITE_ERROR   => array('id'    => self::TYPE_SITE_ERROR,
                                             'title' => _t('contacts', 'Ошибка на сайте')
            ),
            self::TYPE_TECH_SUPPORT => array('id'    => self::TYPE_TECH_SUPPORT,
                                             'title' => _t('contacts', 'Технический вопрос')
            ),
            self::TYPE_PAY_SUPPORT => array('id'    => self::TYPE_PAY_SUPPORT,
                                             'title' => _t('contacts', 'Вопрос по оплате')
            ),
            self::TYPE_OTHER        => array('id' => self::TYPE_OTHER, 'title' => _t('contacts', 'Другие вопросы')),
        );

        if ($options) {
            return HTML::selectOptions($types, 0, false, 'id', 'title');
        }

        return $types;
    }

Как с этим быть?

[Николай Чуприк]

1. Линк такого вида mysite.ru/page.html#setthisvalue

2. Последний вопрос уже вопрос не к вёрстке, и не к JS, а к бэкэнду. Тогда посмотрите, какой id у целевого пункта option приходит в браузер. Просто допишите код, который я привёл, к странице. Последний вариант инлайнового кода, разумеется, отпадает, если не лезть в кишки бэкэнда. (Подозреваю, что это какой-то распространённый движок, но я их не знаю, и потому не узнаю).

[Александр Коновалов]

Николай Чуприк, в браузере это выглядит так:

<select name="ctype" class="j-required" id="j-contacts-form-subject">
<option value="1">Ошибка на сайте</option>
<option value="2">Технический вопрос</option>
<option value="3">Вопрос по оплате</option>
<option value="4">Другие вопросы</option>
</select>

[Николай Чуприк]

Просто припишите в шаблоне после <select>...</select>

<script>document.querySelector( '#j-contacts-form-subject option[value=1]' ).selected = "location.hash === '#setthisvalue'")</script>

если надо выбрать опцию с value = 1. Имя якоря setthisvalue замените на любое по вкусу.

[Александр Коновалов]

Николай Чуприк, перекидывает, но опция не выбирается

[Александр Коновалов]

Николай Чуприк, консоль выдает ошибку: Uncaught SyntaxError: Unexpected token )

[Николай Чуприк]

Забыл двойные кавычки возле 1

<script>document.querySelector( '#j-contacts-form-subject option[value="1"]' ).selected = "location.hash === '#setthisvalue'")</script>

[Александр Коновалов]

Николай Чуприк, аналогично

[Николай Чуприк]

Уберите скобку ) в конце. Ошибся.

[Александр Коновалов]

Николай Чуприк, теперь все работает. Спасибо!

[Александр Коновалов]

Николай Чуприк, знаете какая штука. Теперь всегда выбрана определенная опция, которая указана в скрипте, не зависимо переходил я по ссылке с якорем или просто открыл эту страницу

[Николай Чуприк]

Блин, одни ошибки, т.к. писал, не проверяя. Уберите двойные кавычки вокруг location.hash === '#setthisvalue'

Это выражение должно давать true или false в зависимости от наличия якоря в URL. Если поставить кавычки, то выражение становится строкой, а т.к. она непустая, то это означает всегда значение true, и переход к этой опции осуществляется всегда.

[Александр Коновалов]

Николай Чуприк, все ок. Спасибо большое!