Опция Capture selected возвращает не определенные

Question

Мне нужно захватить выбранную опцию пользователя и отправить это значение в запросе на публикацию.

Давайте проигнорируем часть публикации, поскольку она не имеет прямого отношения к вопросу.

Но сейчас значение отображается как неопределенное.

CodePen:

https://codepen.io/ogonzales/pen/yLyQQaP

У меня есть JS, но lista_id, значение Мне нужно захватить, появляется как undifined. Почему?

Я пытался установить это как глобальную переменную. В JS вы увидите предупреждение, это оповещение не определено для lista_id

JS:

<script>
    $("#agregarProducto1").click(function () {
    var lista_id;
    $('#listas-de-usuario').change(function() {
       var lista_id = $(this).find('option:selected').val();
    });
    alert(lista_id);
    // $.post("{% url 'listas/agregar-producto/", {
    //     c_slug: "cuadernos",
    //     s_slug: "Cuadernos",
    //     product_slug: "cuadernos-rojos",
    //     lista_id: lista_id,
    //    });
   });
</script>

Answer 1

Вы можете объявить переменную только один раз - либо глобально, либо в окружающей функции, а затем не объявлять их в обработчиках click или change. Таким образом, это та же самая переменная, на которую вы ссылаетесь.

Кроме того, код для привязки обработчика change может быть вне обработчика click, иначе он будет привязан при каждом нажатии кнопки.

Пример объявления глобальной переменной:

CodePen

Пример объявления переменной внутри document ready функции jQuery:

CodePen