Using select to DOM css using attribute

Question

Hi I am trying to display some elements using querySelectorAll to capture attributes and DOM the css for the elements, till now faced with "Syntax error: An invalid or illegal string was specified" will appreciate some help here.

Here is my code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>select sort function</title>

<style>

a{text-decoration:none;display:none;font-family:sans-serif,arial;}

</style>

</head>

<body>

<select id="sortsel" onchange="listFunction()">

    <option value='0'>- All Sorting -</option>

    <option value='1'>Sort A</option>

    <option value='2'>Sort B</option>

</select><br/><br/>

<div>

<a href="javascript:void(0)" data-sortid="1">Sort A sub 1</a><br/>

<a href="javascript:void(0)" data-sortid="1">Sort A sub 2</a><br/>

<a href="javascript:void(0)" data-sortid="1">Sort A sub 3</a><br/>

<a href="javascript:void(0)" data-sortid="2">Sort B sub 1</a><br/>

<a href="javascript:void(0)" data-sortid="2">Sort B sub 2</a><br/>

<a href="javascript:void(0)" data-sortid="2">Sort B sub 3</a><br/>

</div>

<script>

function listFunction(){

    var selectSort = document.getElementById("sortsel");

    var selectedSort = selectSort.options[selectSort.selectedIndex].value;

    console.log(selectedSort);

    var testing = '[';

    testing += 'data-sortid="';

    testing += selectedSort;

    testing += '"]';

    console.log(testing);

    document.querySelectorAll(testing).style.display="block";

}

</script>

</body>

</html>

Much appreciate any help here.

Answer 1

if we want to query node attribute we may use [data-sortid='1'] like structure

Javascript

function listFunction(){
    var selectSort = document.getElementById("sortsel");
    var selectedSort = selectSort.options[selectSort.selectedIndex].value;
    console.log(selectedSort);
    var testing = '';
    testing += '[data-sortid="';
    testing += selectedSort;
    testing += '"]';
    console.log(testing);

    [].forEach.call(document.querySelectorAll(testing), function (el) {
        el.style.display="block";
    });
}

Using select to DOM css using attribute

Sign up