JQuery показать / скрыть на поле выбора - динамические значения - PullRequest
0 голосов
/ 20 марта 2012

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

Я использую следующий код в качестве основы: (который можно увидеть на http://jsfiddle.net/rtXLe/)

<select>
    <option value="#divA">a</option>
    <option value="#divB">b</option>
</select>

<div id="divA" class="brandDiv">brand A</div>
<div id="divB" class="brandDiv">brand B</div>

<script type="text/javascript">
    $(function() {
        $("select").change(function() {
            // hide all brands first
            $("div.brandDiv").hide();
            // val is something like #div1 or #div2
            var targetId = $(this).val();
            // show the new selected one
            $(targetId).show();
        });
    });         
</script>

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

<select>
    <option value="3135">a</option>
    <option value="3136">b</option>
</select>

<div id="3135" class="brandDiv">brand A</div>
<div id="3136" class="brandDiv">brand B</div>

При этом, хотя очевидно, что в значении отсутствует хеш-тег, который затем не может быть обнаружен jQuery.

Что мне нужно изменить в jQuery для работы подразделений?

Ответы [ 5 ]

2 голосов
/ 20 марта 2012

Вот оно работает: http://jsfiddle.net/jhRHg/5/

HTML:

<select>
    <option value="3135">a</option>
    <option value="3136">b</option>
</select>

<div id="3135" class="brandDiv">brand A</div>
<div id="3136" class="brandDiv">brand B</div>
​

JQuery:

$("select").change(function() {
    // hide all brands first
    $("div.brandDiv").hide();
    // val is something like #div1 or #div2
    var targetId = $(this).val();

    console.log($(targetId).html());
    // show the new selected one
    $("#"+targetId).show();
});​

Это поможет, ура!

0 голосов
/ 20 марта 2012

отметьте это

http://jsfiddle.net/rtXLe/9/

0 голосов
/ 20 марта 2012

Просто вручную добавьте тег #

<script type="text/javascript">
    $(function() {
        $("select").change(function() {
            // hide all brands first
            $("div.brandDiv").hide();
            // val is something like #div1 or #div2
            var targetId = $(this).val();
            // show the new selected one
            $("#"+targetId).show();
        });
    });         
</script>
0 голосов
/ 20 марта 2012

почему вы не добавляете хеш?

    var targetId = '#' + $(this).val();
0 голосов
/ 20 марта 2012

Вам просто нужно вручную добавить символ «#».

Я обновил jsFiddle в качестве примера:

$("select").change(function() {
    // hide all brands first
    $("div.brandDiv").hide();
    // val is something like #div1 or #div2
    var targetId = "#" + $(this).val(); // <-- manually appending the # character here
    console.log($(targetId).html());
    // show the new selected one
    $(targetId).show();
});​
...