Option value versus index

[JJJorgensen]

Ok, I've been having a hard time with this thing.  It seems like it should be simple but I keep running into obstacles that I just can't seem to fix.

I've got a bunch of files that I want my users to be able to access.  There's 2 types (articles, calendars) and each needs to be viewed in 1 of 3 formats (pdf, word, webpage).  these files are monthly.

So I have the following option boxes - Year, Month, Type, format.  User selects and then clicks a button to get the URL link.  2 problems  - 1) the extensions of the calendars are .pdf, .docx and .html whereas the article extensions are .pdf, .doc and .htm; 2) the file name format is different  - calendar name format is Year Month Calendar.extension  - article name is Month Article Year.extension.

This is where I'm at codewise so far. 

<form>
  Select the year:
    <select id="myYear">
      <option>2018</option>
      <option>2017</option>
      <option>2016</option>
      <option>2015</option>
    </select>
	
  <br><br>
	
	Select the month:
    <select id="myMonth">
      <option>January</option>
      <option>February</option>
      <option>March</option>
      <option>April</option>
	  <option>May</option>
	  <option>June</option>
	  <option>July</option>
	  <option>August</option>
	  <option>September</option>
	  <option>October</option>
	  <option>November</option>
	  <option>December</option>
    </select>
	
  <br><br>
	
	Select Calendar or Article:
    <select id="myType">
      <option>Article</option>
      <option>Calendar</option>


    </select>
	
	  <br><br>
	
	Select PDF, Word or Webpage:
    <select id="myFormat">
      <option>PDF</option>
      <option>doc</option>
	  <option>htm</option>

    </select>
  
  <br><br>
  
  <input type="button" onclick="myFunction()" value="Click Me!">
  <br><br>
	
</form>

<a id="myLink" href="http://www.myOrg.org/Article/HomePage.htm" target="_blank">Star Homepage and Submission</a>
 
<script>
function myFunction() {
		 var Yrsel = document.getElementById("myYear");
		 var Mnthsel = document.getElementById("myMonth");
		 var Typesel = document.getElementById("myType");
		 var Formatsel = document.getElementById("myFormat");
    document.getElementById("myLink").innerHTML = "Get Star";
    
	if (Typesel.options[Typesel.value] = "Article") {
	   	document.getElementById("myLink").href = "http://www.myOrg.org/Article/" + 
	     Mnthsel.options[Mnthsel.selectedIndex].text + " " + 
		 Yrsel.options[Yrsel.selectedIndex].text + " Article " + 
		 Typesel.options[Typesel.selectedIndex].text + "." +
		 Formatsel.options[Formatsel.selectedIndex].text;

	}
	
	if (Typesel.options[Typesel.value] = "Calendar") {
	document.getElementById("myLink").href = "http://www.myOrg.org/Article/" + 
	     Mnthsel.options[Mnthsel.selectedIndex].text + " Calendar " + 
		 Yrsel.options[Yrsel.selectedIndex].text + " " + 
		 Typesel.options[Typesel.selectedIndex].text + "." +
		 Formatsel.options[Formatsel.selectedIndex].text;

	}
}
</script>
	
	
	
	
  </div>

</div>


  

It works but I would like to use value instead of Index for the extension (format) options.  So I can put something like <option value="htm">Webpage - viewable in browser, not formatted for printing</option>.  Of course I would use an if statement to take care of the extra letters in the extensions.  However, when I try using the value in the code it doesn't work. Formatsel.options[Formatsel.value].text 

 

HELP!!!  Why won't the value work?  I get a URL of XXXX.undefined  

[dsonesuk]

You do know, IF no value attribute is provided, that the content text of option is used instead.

You use the selectedtIndex to identify which option was selected as it will return an index ref 0 to total number of options -1, and it will used as

Formatsel.options[0]

Formatsel.options[1]

Formatsel.options[2]

You can see this by adding

alert(Formatsel.selectedIndex)

After

var Formatsel = document.getElementById("myFormat");

You then will use '.value' to return the value from that specific option listing index 

Formatsel.options[0].value; // PDF from value if present or text if not!

or content text using '.text'

Formatsel.options[2].text; // html from text only.

Of course you can get value or text by not using .options[Formatsel.selectedIndex] at ALL, just by using

Formatsel.value

OR

Formatsel.text

 

Edited May 1, 2018 by dsonesuk

[JJJorgensen]

Well the value works in getting the script to run but when I try to populate my URL it's still picking up the text.  ???

	if (Typesel.options[Typesel.value] = "Article") {
	   	document.getElementById("myLink").href = "http://www.myOrg.org/Star/" + 
	     Mnthsel.options[Mnthsel.selectedIndex].text + " " + 
		 Yrsel.options[Yrsel.selectedIndex].text + " Article " + 
		 Typesel.options[Typesel.selectedIndex].text + "." +
		 Formatsel.value;

	}

 

[dsonesuk]

22 minutes ago, JJJorgensen said:

Well the value works in getting the script to run but when I try to populate my URL it's still picking up the text.  ???

	if (Typesel.options[Typesel.value] = "Article") {
	   	document.getElementById("myLink").href = "http://www.myOrg.org/Star/" + 
	     Mnthsel.options[Mnthsel.selectedIndex].text + " " + 
		 Yrsel.options[Yrsel.selectedIndex].text + " Article " + 
		 Typesel.options[Typesel.selectedIndex].text + "." +
		 Formatsel.value;

	}

 

That gives no help at ALL! Does OR does not the options attribute value EXIST AT ALL? AS said, if the value attribute with a string value does not exist AT ALL! It will return the TEXT only, IF the '.text' is used and value attribute with a string value and text content exists, it WILL return the TEXT only, if value attribute with a string value exist and obviously the text and you ask for '.value' it WILL return the VALUE only.

What is specifically ask for and exists, is what is returned, else the text content in option is used for value until it exists.