为什么点击我的按钮不选择警报范围？

Question

I' ve a button, so when user clicks it, it should alert range selected. If user didn't change the range selected (slider) default value 1 should be alerted.

Why is not alerting it?

Codepen:

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

Error: it should only alert 1 value:

JS:

 $('#step_one_siguiente').on('click', function () {
        let val = this.value;
        alert($("#performance_options").prop("selected", true).text());
    });

Answer 1

Here is a workaround that might be helpful.

let ranges = ['1080p','1440p','2k']

$('#step_one_siguiente').on('click', function () {
        var index = parseInt($('input').val()) - 1
        alert(ranges[index]);
    });

Answer 2

I think it is because the way you use the syntax of the datalist is incorrect. Values are not meant to be between the option tags but only in the value="" attribute. However for this to work, the input value would need to match the list value, which is not compatible with a range control as the values you want are not a sequence.

https://www.w3schools.com/tags/tag_datalist.asp

Answer 3

Based on Ibrahim question, I was able to come up with:

Apparently I don't have to search for a selected range, as it only returns the value of the selected one.

<script>

    $('#step_one_siguiente').on('click', function () {
        alert($('[type="range"]').val());
    });
</script>