How to display multiple dropdown list using javscript with if else statement?

This uses your <span class="output"> to display the chosen values rather than using document.write to create new <h1> elements. This could do the same thing using an h1 instead of a span, and the location in the page can be anything you want — I just left the spans where you originally put them.

There are many differences between what I wrote and your original page and code.

I've changed the HTML to use more logical and descriptive names for classes and IDs, which makes the code more understandable. For example, rather than generic names like "output" and "output2" I use "state-output" and "router-output".

I get the elements that are involved in the function just once, when the page loads, rather than when the function is called. Those elements never change, so getting the elements every time the function is called is unnecessary overhead. In this brief case it doesn't matter much, because the function is probably only going to be called once.

I'm using some cascading ternary operators (? :) because it's briefer than a series of if-else statements. This could also be done with a switch statement, or by using a map of values to words

{
    'regiona' : 'TAMILNADU',
    'regionb' : 'ANDHRA PRADESH'
}

I style everything separately using CSS, rather than having duplicate inline style="..." that would need to be kept consistent by changing them everywhere they appear.

document.getElementById('apply-button').addEventListener('click', apply);

const stateElement  = document.getElementById('state-select');
const stateOutput   = document.getElementById('state-output');
const routerElement = document.getElementById('router-select');
const routerOutput  = document.getElementById('router-output');

function apply() {
    const stateVal = stateElement.value;
    const routerVal = routerElement.value;

    stateOutput.innerText =
        stateVal === 'regiona' ? 'TAMILNADU' :
        stateVal === 'regionb' ? 'ANDHRA PRADESH' :
        'unknown';

    routerOutput.innerText = routerVal;
}

section {
    margin: 0 0 1em 0;
}
span.output {
    display: inline-block;
    margin-left: 2em;
    font-weight: bold;
    color: darkgreen;
}

<section class="selections">
    <p>SELECT THE STATE:</p>
    <select id="state-select"> 
        <option value="regiona">TAMILNADU</option>
        <option value="regionb">ANDHRA PRADESH</option>
    </select>
    <span id="state-output" class="output"></span>

    <p>SELECT THE ROUTER TYPE:</p>
    <select id="router-select"> 
        <option value="ASR9K">ASR9K</option>
        <option value="ASR920">ASR920</option>
    </select>
    <span id="router-output" class="output"></span>
</section>

<section class="button-set">
    <button type="button" id="apply-button">Apply</button> 
</section>

In place of my use of the ternary operator you could use some if-else logic or a switch statement

stateOutput.innerText =
    stateVal === 'regiona' ? 'TAMILNADU' :
    stateVal === 'regionb' ? 'ANDHRA PRADESH' :
    'unknown';

would become this if-else

if (stateVal === 'regiona') {
    stateOutput.innerText = 'TAMILNADU';
}
else if (stateVal === 'regionb') {
    stateOutput.innerText = 'ANDHRA PRADESH';
}
else {
    stateOutput.innerText = 'unknown';
}

or this switch-case

switch (stateVal) {
    case 'regiona':
        stateOutput.innerText = 'TAMILNADU';
        break;
    case 'regionb':
        stateOutput.innerText = 'ANDHRA PRADESH';
        break;
    default:
        stateOutput.innerText = 'unknown';
        break;
}

function apply() {
  output1 = document.querySelector('#select1').value;
  output2 = document.querySelector('#select2').value;
  document.querySelector('.output').textContent = output1;
  document.querySelector('.output1').textContent = output2;


  if (output === 'accessa' || output1 === 'regiona') {
    document.write('<h1 style ="color: #ff0000;">TAMILNADU</h1>');
  } else if (output === 'accessa' || output1 === 'regionb') {
    document.write('<h1 style ="color: #ff0000;">ANDHRA PRADESH</h1>');
  }
}

there are multiple reasons your code doesn't work,

1. you can't select multiple elements with querySelector
2. while setting the text values you were not assigning to both variables

UPDATE:

you have a duplicate value for the select1 value accessa twice. so updated that and also on the else if conditional you are checking output =='accessa' again on top of checking it inside the if just before.

so i have updated the whole script

<option value="accessb">ASR920</option>
...
function apply() {
 var select1 = document.getElementById("select1");
 var select2 = document.getElementById("select2");
 output1 = select1.options[select1.selectedIndex].value;
 output2 = select2.options[select2.selectedIndex].value;
 if (output1 === 'accessa' || output2 === 'regiona') {
   document.write('<h1 style ="color: #ff0000;">TAMILNADU</h1>');
 } else if (output1 === 'accessb' || output2 === 'regionb') {
   document.write('<h1 style ="color: #ff0000;">ANDHRA PRADESH</h1>');
 }
}