Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выпадающий список ajax combobox получить выбранное значение (https://javascript.ru/forum/events/77354-vypadayushhijj-spisok-ajax-combobox-poluchit-vybrannoe-znachenie.html)

olberd 22.04.2019 18:46

Выпадающий список ajax combobox получить выбранное значение
 
Прошу помощи, как получить значение номера машины при выборе из списка, страница не моя, получить значение нужно со стороны клиента.

<div onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$fvTrip$ddlCarNums\',\'\')', 0)"
    id="MainContent_fvTrip_ddlCarNums" style="display:inline;">
    <table id="MainContent_fvTrip_ddlCarNums_Table" class="ajax__combobox_inputcontainer" cellspacing="0"
        cellpadding="0"
        style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;position:relative;top:5px;">
        <tbody>
            <tr>
                <td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$fvTrip$ddlCarNums$TextBox"
                        type="text" value="(не выбран)" id="MainContent_fvTrip_ddlCarNums_TextBox" autocomplete="off"
                        style="margin: 0px;"></td>
                <td class="ajax__combobox_buttoncontainer"><button id="MainContent_fvTrip_ddlCarNums_Button"
                        type="button"
                        style="visibility: visible; height: 19px; width: 19px; margin: 0px; padding: 0px;"></button>
                </td>
            </tr>
        </tbody>
    </table><input type="hidden" name="ctl00$MainContent$fvTrip$ddlCarNums$HiddenField"
        id="MainContent_fvTrip_ddlCarNums_HiddenField" value="0">
</div>


<div class="">
    <ul id="MainContent_fvTrip_ddlCarNums_OptionList" class="ajax__combobox_itemlist"
        style="display: none; visibility: hidden; z-index: 10000; overflow: hidden; width: 178px; position: absolute; height: 368px;">
        <li>(не выбран)</li>
        <li>А161МН177</li>
        <li>В136НО799</li>
        <li>В559НА67</li>
        <li>В599НР750</li>
        <li>Е599НР750</li>
        <li>О161МН177</li>
        <li>О924МУ197</li>
    </ul>
</div>


Пробовал так, ничего не получается, на других input работает, там где нет ajax__combobox

Код:

document.addEventListener('change', function(e) {
    if(e.target && e.target.id == 'MainContent_fvTrip_ddlCarNums_TextBox') {
        var am = document.getElementById("MainContent_fvTrip_ddlCarNums_TextBox");
        console.log(am.value);
  }
});

и так
Код:

var am = document.getElementById("MainContent_fvTrip_ddlCarNums_TextBox");
    function changeAm(){
        console.log(am.value);
      }
    }
    am.addEventListener('change', changeAm );


Dilettante_Pro 23.04.2019 11:18

А какое отношение к выбору из списка
<ul id="MainContent_fvTrip_ddlCarNums_OptionList"
имеет
id == 'MainContent_fvTrip_ddlCarNums_TextBox' ?

Dilettante_Pro 23.04.2019 12:00

М.б. так?

<div onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$fvTrip$ddlCarNums\',\'\')', 0)"
    id="MainContent_fvTrip_ddlCarNums" style="display:inline;">
    <table id="MainContent_fvTrip_ddlCarNums_Table" class="ajax__combobox_inputcontainer" cellspacing="0"
        cellpadding="0"
        style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;position:relative;top:5px;">
        <tbody>
            <tr>
                <td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$fvTrip$ddlCarNums$TextBox"
                        type="text" value="(не выбран)" id="MainContent_fvTrip_ddlCarNums_TextBox" autocomplete="off"
                        style="margin: 0px;"></td>
                <td class="ajax__combobox_buttoncontainer"><button id="MainContent_fvTrip_ddlCarNums_Button"
                        type="button"
                        style="visibility: visible; height: 19px; width: 19px; margin: 0px; padding: 0px;"></button>
                </td>
            </tr>
        </tbody>
    </table><input type="hidden" name="ctl00$MainContent$fvTrip$ddlCarNums$HiddenField"
        id="MainContent_fvTrip_ddlCarNums_HiddenField" value="0">
</div>


<div class="">
    <ul id="MainContent_fvTrip_ddlCarNums_OptionList" class="ajax__combobox_itemlist"
        style="display: none;  visibility: hidden; z-index: 10000; overflow: hidden; width: 178px; position: absolute; height: 368px;">
        <li>(не выбран)</li>
        <li>А161МН177</li>
        <li>В136НО799</li>
        <li>В559НА67</li>
        <li>В599НР750</li>
        <li>Е599НР750</li>
        <li>О161МН177</li>
        <li>О924МУ197</li>
    </ul>
</div>
<script>
var list = document.getElementById("MainContent_fvTrip_ddlCarNums_OptionList");
document.getElementById("MainContent_fvTrip_ddlCarNums_Button").onclick = function() {
     list.style.display = "block";
     list.style.visibility =  "visible";
}
list.addEventListener('click', function(e) { 
   document.getElementById("MainContent_fvTrip_ddlCarNums_TextBox").value = e.target.textContent;   
   list.style.display = "none";
});
</script>

olberd 23.04.2019 15:00

Не то, что нужно
 
Вложений: 1
Спасибо за ответ!
Вопрос не в том как сделать, что бы выпадающий список заработал, он работает, код на странице изменить нет возможности, сайт не мой.

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

Dilettante_Pro 23.04.2019 15:43

olberd,
Суть ответа в том, что проверять нужно не изменение в input, а выбор из списка.
Как-то так
document.getElementById("MainContent_fvTrip_ddlCarNums_OptionList").addEventListener('click', function(e) { 
   console.log( e.target.textContent);   
});

olberd 23.04.2019 16:43

Все Id перебрал, события не происходят

Dilettante_Pro 23.04.2019 16:57

olberd,
Какие события?

olberd 23.04.2019 18:54

События click и change.
Я так понимаю, вот что это за список.
http://www.ajaxcontroltoolkit.net/Co.../ComboBox.aspx


Часовой пояс GMT +3, время: 02:46.