CODEWITHSUNDEEP
javascriptphpjqueryhtml
New
New

Reputation: 1

Is there any way to generate html link from a select tag option list value?

Suppose I have a file "file.html" with the content:

<select>
  <option vale="apple.html">Apple</option>
  <option vale="ball.html">Ball</option>
  <option vale="cat.html">Cat</option>
</select>

Now I want the value and the names of each option tag from this file to be displayed in another file "new.html" as:

<a href="apple.html">Apple</a>
<a href="ball.html">Ball</a>
<a href="cat.html">Cat</a>

What will be the best possible way of achieving this? and also this must be dynamic so that in adding a new option tag in "file.html",the value and names of that updated option tag is displayed automatically in new.html. My whole intention is to maintain one common file to obtain the select option list and the html links separately from that one common file.Changing the data in that one common file will trigger the change in option list and the html link in different files automatically.In this case that one common is the "file.html".

Any advice on how to achieve the result a different way is also welcomed. Thank you in advance.

Upvotes: 0

Views: 130

Answers (5)

Barclick Flores Velasquez
Barclick Flores Velasquez

Reputation: 673

<select onchange="location = this.value;">
  <option value="apple.html">Apple</option>
  <option value="ball.html">Ball</option>
  <option value="cat.html">Cat</option>
</select>

Upvotes: 0

rafon
rafon

Reputation: 1542

You can use localStorage to store each link and access it to other page.

Use JQuery library to make life easier.

Use this as reference:

On your file.html

  <select id="linkList">
    <option value="facebook.com" >Facebook</option>
    <option value="google.com" >Google</option>
    <option value="yahoo.com" >Yahoo</option>
  </select>

On your new.html

  <div id="links">

  </div>

The javascript:

<script>
    $(document).ready(function(){
      var linkList = [];
      $('select#linkList').children('option').each(function(i,v){
        linkList.push( $(this)[0].value );
      });
      localStorage.setItem( 'linkList', linkList );
      var links = localStorage.getItem( 'linkList' );
      var linksArray = links.split(',');
      var template = '';
      var link = linksArray.map(function(value, index){
        return '<a href="http://www.'+value+'">'+value.replace('.com','').toUpperCase()+'</a><br/>';
      });
      $('#links').html(link);
      //console.log(linksArray);
    });
</script>

Upvotes: 2

Hossein Oraee
Hossein Oraee

Reputation: 229

with jquery you can use this sample:

<!doctype html>

    <html>

    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0">
        <style>
            .link-item {
                display: block;
                min-width: 100px;
                margin-top: 15px;
                font-size: 14px;
            }

        </style>
    </head>

    <body>
        <select class="target-combo">
          <option value="apple.html">Apple</option>
          <option value="ball.html">Ball</option>
          <option value="cat.html">Cat</option>
        </select>
        <select class="target-combo">
          <option value="apple.html">Apple2</option>
          <option value="ball.html">Ball3</option>
          <option value="cat.html">Cat3</option>

        </select>
        <div id="linksWrapper"></div>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {

                var comBoOptions = $("select.target-combo").children("option");

                var links = [];
                comBoOptions.each(function() {
                    links.push("<a href='" + $(this).val() + "' class='link-item' >" + $(this).text() + "</a>");
                });

                $("#linksWrapper").html(links.join(""));

            })

        </script>
    </body>

    </html>

Upvotes: 0

Neville Nazerane
Neville Nazerane

Reputation: 7049

The most ideal way in which such things are done is by setting up a database and having the values stored in the database. You can also later have a functionality to update the values from your website.

If you won't be using a database you can actually store your list of values into an xml or json file and then use ajax in jquery to load the information and set it into your html. You can look into this link on how ajax will work http://api.jquery.com/jquery.ajax/

Once you have the data, the jquery to update your html will look something like this. 

mydata.forEach(
    function(s){
        $("select").append($("<option>").attr("value", s).text(s));
    }
);

Where mydata is your array of data. Of course the code will need several updates such as setting an id for your select. However this is the basic idea.

Upvotes: 0

Sven
Sven

Reputation: 57

If you want to do it without any database where you load the list from. Maybe it is possible to make one file with all the options and include this file in the files where you want to use it. With this option you only have to change one file to change every other file.

Upvotes: 0

Related Questions