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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have an image thumbnail set in option of select .

I would like the script to automatically insert the caption, for each of these images in select , based on the attribute in> title .

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>

Note that if you use the attribute option of the text then it will be over the image - then I saw that it would be necessary to invest efforts in working with the% since the same is hidden, all you have to do is look for a way to get your content and between another text tag . As an example, option , title , span , b , p etc ...

, Although the console did not acknowledge any error , it still did not bring me any results.

javascript dom atributos option

asked by anonymous 19.05.2018 / 23:18

2 answers

1

The 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>

20.05.2018 / 04:29

Get name of the respective PHP table in SELECT UNION Graphs - return a pointer to the adjacency array

score 1 · Accepted Answer

I do not think javascript is necessary in this case.

It would also be possible to use Javascript but I find it simpler not to use it right now.

Solution

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

I hope I have 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>