Display contents of the "title" attribute next to the option element

Asked

Viewed 246 times

1

I have a thumbnail set of images on option of select.

I would like the script automatically enter the caption for each of these images in the select, based on attribute title of tag option.

The example of what I’ve done:

window.onload = function(){
var opt = document.getElementById('lista').getElementsByTagName('option');

var txt = document.getElementById('lista').getElementsByTagName('b');

for (var n=0; n < txt.length; n++) {
  for (var i=0; i < opt.length; i++) {
    txt[n].getElementsByTagName('b')[0].innerHTML = opt[i].getElementsByTagName('option')[0].title;
    }
  } 
}
body {
	background-color: whitesmoke;
}

option {
	font-size: 12pt;
	color: white;
	padding: 10 10 10 10;
	margin: 0 auto;
	background-repeat: no-repeat; 

	background-size: 100px;
	height: 50px;
}

option:hover { 
	background-color: whitesmoke; 
    border-right: 2px solid tomato;
	cursor: pointer; 
    size: 150%;
}

.bloc select {  
	width:450px; 
	height:100%;
	padding:30px; 
	background-color: white;
    float: right;
    border:none;
    margin: 0px -20px 0px 0px;
    }
    
.bloc {
    overflow: hidden;
    }
<div class="bloc">
  <select id="lista" size="3">
	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg);" title="Big Buck Bunny">Big Buck Bunny</option>&nbsp;&nbsp;<b></b>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg);" title="Madagascar 2">Madagascar 2</option>&nbsp;&nbsp;<b></b>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg);" title="Procurando Dory">Procurando Dory</option>&nbsp;&nbsp;<b></b>
  </select>
<div>

inserir a descrição da imagem aqui

Please note that if you use attribute text of option then it will stand on the image - then I saw that it would be necessary to invest efforts in working with the attribute title, since it is hidden, just search for a way to pick up its content and between another text tag. As an example: span, b, p, strong, small etc....

The script, although the console does not accuse any error, hasn’t brought me any results yet.

javascript dom attributes option

  • I imagine you could use a LI list to do this instead of SELECT, because SELECT is not quite the best choice to do such a thing. Also vc cannot put elements between OPTION pq the HTML will not display.

  • Yes, that would be an option. Select the width of the images and put a list next to it displaying the names.

  • @So how did I ever manage to capture the title and play within the div I will prepare an answer for this topic. It will be for future research and consultation.

  • I had thought about it too, but I didn’t know that OPTION could have pseudo-elements :D... but see that if the title of the film is long, the text disappears on the right ;/

  • I saw it, but clicking the <p> does not select the option.

  • @dvd It is a detail that I will edit, as I am still framed a coherent explanation to the context, and leave a hint for loop create the element p dynamically since it is not known how much item I can add to the select, not having the need to keep inserting tags p manually in the container.

Show 1 more comment

2 answers

1


I don’t think javascript is necessary in this case.

it would also be possible to use Javascript but I think it’s simpler not to use it right now.

Solution

Use a pseudo class in css, in this case the ::after to house the text and be able to move it, so you can use the tranform: next to the translate to move it relative to itself. Finally to get the title attribute of the tag, we use the function attr() css, which gets the attribute you want to pick up content.

I hope I’ve helped ;D

body {
   background-color: whitesmoke;
}

option {
   font-size: 12pt;
   color: white;
   padding: 10 10 10 10;
   margin: 0 auto;
   background-repeat: no-repeat; 

   background-size: 100px;
   height: 50px;
}

option:hover { 
   background-color: whitesmoke; 
   border-right: 2px solid tomato;
   cursor: pointer; 
   size: 150%;
}

option::after {
   content: attr(title);
   display: block;
   color: black;
   transform: translateX(110px);
}

.bloc select {  
   width:450px; 
   height:100%;
   padding:30px; 
   background-color: white;
   float: right;
   border:none;
   margin: 0px -20px 0px 0px;
}

.bloc {
   overflow: hidden;
}
<div class="bloc">
  <select id="lista" size="3">
	<option title="Big Buck Bunny" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg);"></option>

	<option title="Madagascar 2" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg);"></option>

	<option title="Procurando Dory" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg);"></option>
  </select>
<div>

  • 1

    Tai something I didn’t know. Congratulations man! Even so, I will put a solution javascript.

1

The following problem solved in Javascript in conjunction with CSS:

var opt = document.getElementById('lista');

var txt = document.getElementById('container').getElementsByTagName('p');

  for (var i=0; i < opt.length; i++) {
    txt[i].innerHTML = opt[i].title;
    }
body {
	background-color: whitesmoke;
}

option {
	background-repeat: no-repeat; 
	background-size: 100px 45px;
	height: 50px;
    color: white;
}

option:hover { 
	background-color: whitesmoke; 
    border-right: 2px solid tomato;
	cursor: pointer; 
    }

        .bloc select {
            width:280px;
            border: none;
            float: left;
            margin: 5px -176px 0px 0px;
            background-color: white;
		    color: white;

        }

        .bloc {
            vertical-align: top;
            overflow: hidden;
        }
    
#container  {
    width: 265px;
    color: black;	
    line-height: 30px;
    float: left;
    padding: 15px;
    margin: 5px;
    background-color: white;
}
<div id="container">

<div class="bloc">
  <select id="lista" size="3">
	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg);" title="Big Buck Bunny"></option>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg);" title="Madagascar 2"></option>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg);" title="Procurando Dory"></option>
  </select>
  <div>
  
    <p></p>
    <p></p>
    <p></p>
</div>

  • Cool, the only point would be to add the p also not to lose the effect

  • 1

    @Marcosjunior Puts! I forgot this detail. I will edit and add, since I am working out a proper explanation the answer.

Browser other questions tagged javascript dom attributes option

You are not signed in. Login or sign up in order to post.