Как получить val после клика?

Question

[McThinker]

Есть код, который отвечает за вывод :

$result = $db_handle->runQuery($query);
    if(!empty($result)) { ?>
        <ol id="change-thems">
            <?php
            foreach($result as $country) {
                ?>
                <li onClick="selectCountry('<?php echo $country["city_name"]; ?>'); "><?php
                    if($country["highway"] == 1 || 2 || 3 || 4) echo $country["id"];?></li>
            <?php } ?>
        </ol>
        <?php
    }

Как мне записать $country["id"]; после клика на li ?



Ну и js вывод

$("#airports_next").click(function () {
	alert($("#search-box").val());
});

Мне нужно в итоге получить val li того города, которого выбрал.

Answer 1

[coderisimo]

function selectCountry(val){

// если я правильно понял - в ф-цию selectCountry добавьте это. "val" это ваше значение
alert(val) ; 
}

Comments

[McThinker]

coderisimo это есть. Не помогает. Как записать в переменную тот val, который кликнул, не понимаю

function selectCountry(val) {
    $("#search-box").val(val);
    $("#change-thems").val(val);
    $("#suggesstion-box").hide();
}

[coderisimo]

McThinker, давайте сюда код и разметку текстом. И на будщее ваяйте сразу CodePen

[coderisimo]

McThinker,

[McThinker]

coderisimo,

вот основной код

$(document).ready(function() {
    $("#search-box").keyup(function() {
        var inputVal = $(this).val();
        if (inputVal.length === 0) {
            $("#suggesstion-box").hide()
        }
        if (inputVal.length < 2) {
            $("#search-box").attr("autocomplete", "off");
        }
        if (inputVal.length > 2) {
            $("#search-box").attr("autocomplete", "on");
            $.ajax({
                type: "POST",
                url: "readCountry.php",
                data: 'keyword=' + $(this).val(),
                beforeSend: function() {
                    $("#search-box").css("background", "#FFF url(images/LoaderIcon.gif) no-repeat 165px");
                },
                success: function(data) {
                    $("#suggesstion-box").show();
                    $("#suggesstion-box").html(data);
                    $("#search-box").css("background", "#FFF");
                }
            });
        }
    });
});

function selectCountry(val) {
    $("#search-box").val(val);
    $("#change-thems").val(val);
    $("#suggesstion-box").hide();
}

[McThinker]

coderisimo, попробую объяснить подробнее, что хочу. Есть инпут, работает автокомплит, клик происходит по li в #country-list, а сравнить нужно после клика с li в #change-thems.
По итогу я хочу получить один li в #change-thems.

[coderisimo]

McThinker, как-то печально усе...
ок. а если попробовать вот так ?

<li  class='test-li'   li-data="<?= $country['city_name'] ?>"  ><?php
       if($country["highway"] == 1 || 2 || 3 || 4) echo $country["id"];?></li>

а в js добавить

$('body').on('click' , '.test-li', function(){

alert($(this).attr('li-data'));

});

[McThinker]

coderisimo, отчасти да, чуть переделал и отрабатывает как надо. Спасибо

[coderisimo]

McThinker, удачи. И всегда лучше готовые решения )

[McThinker]

вот пример
что не так делаю?

[coderisimo]

McThinker, как выглядит разметка? Там теперь есть аттрибут li-data ? Класс test-li ?

[McThinker]

coderisimo, прикрепил код

[coderisimo]

McThinker,

потому что атрибут li-data отсутствует в li , этот атрибут есть у span , но вы-то написали обработчик для li . И пытаетесь найти его там. Отсюда и undefined

вот рабочий вариант , общее решение